Already Set

src/common/components/AlreadySet.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { Typography } from '@mui/joy';
+
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+
+
+export function AlreadySet(props: { required?: boolean }) {
+  return (
+    <Typography level='body-sm' startDecorator={props.required ? undefined : <CheckRoundedIcon color='success' />}>
+      {/*Installed Already*/}
+      {props.required ? 'required' : 'Already set on server'}
+    </Typography>
+  );
+}

src/modules/browse/BrowseSettings.tsx

@@ -3,12 +3,13 @@ import { useShallow } from 'zustand/react/shallow';
 
 import { Checkbox, FormControl, FormHelperText, Option, Select, Typography } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
+import { ExternalLink } from '~/common/components/ExternalLink';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
+import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
 
 import { useBrowseCapability, useBrowseStore } from './store-module-browsing';
-import { ExternalLink } from '~/common/components/ExternalLink';
-import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 
 
 export function BrowseSettings() {
@@ -44,7 +45,7 @@ export function BrowseSettings() {
     <FormInputKey
       autoCompleteId='browse-wss' label='Puppeteer Wss' noKey
       value={wssEndpoint} onChange={setWssEndpoint}
-      rightLabel={!isServerConfig ? 'required' : '✔️ already set in server'}
+      rightLabel={<AlreadySet required={!isServerConfig} />}
       required={!isServerConfig} isError={!isClientValid && !isServerConfig}
       placeholder='wss://...'
     />

src/modules/elevenlabs/ElevenlabsSettings.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { FormControl } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { useCapabilityElevenLabs } from '~/common/components/useCapabilities';
@@ -31,7 +32,7 @@ export function ElevenlabsSettings() {
 
     {!isConfiguredServerSide && <FormInputKey
       autoCompleteId='elevenlabs-key' label='ElevenLabs API Key'
-      rightLabel={isConfiguredServerSide ? '✔️ already set in server' : 'required'}
+      rightLabel={<AlreadySet required={!isConfiguredServerSide} />}
       value={apiKey} onChange={setApiKey}
       required={!isConfiguredServerSide} isError={!isValidKey}
     />}

src/modules/llms/vendors/anthropic/AnthropicSourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Alert } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { ExternalLink } from '~/common/components/ExternalLink';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormTextField } from '~/common/components/forms/FormTextField';
@@ -49,7 +50,7 @@ export function AnthropicSourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='anthropic-key' label={!!anthropicHost ? 'API Key' : 'Anthropic API Key'}
       rightLabel={<>{needsUserKey
         ? !anthropicKey && <Link level='body-sm' href='https://www.anthropic.com/earlyaccess' target='_blank'>request Key</Link>
-        : '✔️ already set in server'
+        : <AlreadySet />
       } {anthropicKey && keyValid && <Link level='body-sm' href='https://console.anthropic.com/settings/usage' target='_blank'>show tokens usage</Link>}
       </>}
       value={anthropicKey} onChange={value => updateSetup({ anthropicKey: value })}

src/modules/llms/vendors/azure/AzureSourceSetup.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormTextField } from '~/common/components/forms/FormTextField';
 import { InlineError } from '~/common/components/InlineError';
@@ -49,7 +50,7 @@ export function AzureSourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='azure-key' label='Azure Key'
       rightLabel={<>{needsUserKey
         ? !azureKey && <Link level='body-sm' href='https://azure.microsoft.com/en-us/products/ai-services/openai-service' target='_blank'>request Key</Link>
-        : '✔️ already set in server'}
+        : <AlreadySet />}
       </>}
       value={azureKey} onChange={value => updateSetup({ azureKey: value })}
       required={needsUserKey} isError={keyError}

src/modules/llms/vendors/gemini/GeminiSourceSetup.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { FormControl, FormHelperText, Option, Select } from '@mui/joy';
 import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { InlineError } from '~/common/components/InlineError';
@@ -50,7 +51,7 @@ export function GeminiSourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='gemini-key' label='Gemini API Key'
       rightLabel={<>{needsUserKey
         ? !geminiKey && <Link level='body-sm' href={GEMINI_API_KEY_LINK} target='_blank'>request Key</Link>
-        : '✔️ already set in server'}
+        : <AlreadySet />}
       </>}
       value={geminiKey} onChange={value => updateSetup({ geminiKey: value.trim() })}
       required={needsUserKey} isError={showKeyError}

src/modules/llms/vendors/groq/GroqSourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Typography } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { InlineError } from '~/common/components/InlineError';
 import { Link } from '~/common/components/Link';
@@ -42,7 +43,7 @@ export function GroqSourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='groq-key' label='Groq API Key'
       rightLabel={<>{needsUserKey
         ? !groqKey && <Link level='body-sm' href={GROQ_REG_LINK} target='_blank'>API keys</Link>
-        : '✔️ already set in server'}
+        : <AlreadySet />}
       </>}
       value={groqKey} onChange={value => updateSetup({ groqKey: value })}
       required={needsUserKey} isError={showKeyError}

src/modules/llms/vendors/localai/LocalAISourceSetup.tsx

@@ -6,6 +6,7 @@ import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 
 import { getBackendCapabilities } from '~/modules/backend/store-backend-capabilities';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { ExpanderAccordion } from '~/common/components/ExpanderAccordion';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { InlineError } from '~/common/components/InlineError';
@@ -81,7 +82,7 @@ export function LocalAISourceSetup(props: { sourceId: DModelSourceId }) {
       noKey
       required={userHostRequired}
       isError={userHostError}
-      rightLabel={backendHasHost ? '✔️ already set in server' : <Link level='body-sm' href='https://localai.io' target='_blank'>Learn more</Link>}
+      rightLabel={backendHasHost ? <AlreadySet /> : <Link level='body-sm' href='https://localai.io' target='_blank'>Learn more</Link>}
       value={localAIHost} onChange={value => updateSetup({ localAIHost: value })}
     />
 

src/modules/llms/vendors/mistral/MistralSourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Typography } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { InlineError } from '~/common/components/InlineError';
 import { Link } from '~/common/components/Link';
@@ -39,7 +40,7 @@ export function MistralSourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='mistral-key' label='Mistral Key'
       rightLabel={<>{needsUserKey
         ? !mistralKey && <Link level='body-sm' href={MISTRAL_REG_LINK} target='_blank'>request Key</Link>
-        : '✔️ already set in server'}
+        : <AlreadySet />}
       </>}
       value={mistralKey} onChange={value => updateSetup({ oaiKey: value })}
       required={needsUserKey} isError={showKeyError}

src/modules/llms/vendors/openai/OpenAISourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Alert } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { Brand } from '~/common/app.config';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
@@ -48,7 +49,7 @@ export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='openai-key' label='API Key'
       rightLabel={<>{needsUserKey
         ? !oaiKey && <><Link level='body-sm' href='https://platform.openai.com/account/api-keys' target='_blank'>create key</Link> and <Link level='body-sm' href='https://openai.com/waitlist/gpt-4-api' target='_blank'>request access to GPT-4</Link></>
-        : '✔️ already set in server'
+        : <AlreadySet />
       } {oaiKey && keyValid && <Link level='body-sm' href='https://platform.openai.com/account/usage' target='_blank'>check usage</Link>}
       </>}
       value={oaiKey} onChange={value => updateSetup({ oaiKey: value })}

src/modules/llms/vendors/openrouter/OpenRouterSourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Button, Typography } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { InlineError } from '~/common/components/InlineError';
 import { Link } from '~/common/components/Link';
@@ -56,7 +57,7 @@ export function OpenRouterSourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='openrouter-key' label='OpenRouter API Key'
       rightLabel={<>{needsUserKey
         ? !oaiKey && <Link level='body-sm' href='https://openrouter.ai/keys' target='_blank'>your keys</Link>
-        : '✔️ already set in server'
+        : <AlreadySet />
       } {oaiKey && keyValid && <Link level='body-sm' href='https://openrouter.ai/activity' target='_blank'>check usage</Link>}
       </>}
       value={oaiKey} onChange={value => updateSetup({ oaiKey: value })}

src/modules/llms/vendors/perplexity/PerplexitySourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Typography } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { InlineError } from '~/common/components/InlineError';
 import { Link } from '~/common/components/Link';
@@ -42,7 +43,7 @@ export function PerplexitySourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='perplexity-key' label='Perplexity API Key'
       rightLabel={<>{needsUserKey
         ? !perplexityKey && <Link level='body-sm' href={PERPLEXITY_REG_LINK} target='_blank'>API keys</Link>
-        : '✔️ already set in server'}
+        : <AlreadySet />}
       </>}
       value={perplexityKey} onChange={value => updateSetup({ perplexityKey: value })}
       required={needsUserKey} isError={showKeyError}

src/modules/llms/vendors/togetherai/TogetherAISourceSetup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Alert, Typography } from '@mui/joy';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
 import { InlineError } from '~/common/components/InlineError';
@@ -48,7 +49,7 @@ export function TogetherAISourceSetup(props: { sourceId: DModelSourceId }) {
       autoCompleteId='togetherai-key' label='Together AI Key'
       rightLabel={<>{needsUserKey
         ? !togetherKey && <Link level='body-sm' href={TOGETHERAI_REG_LINK} target='_blank'>request Key</Link>
-        : '✔️ already set in server'}
+        : <AlreadySet />}
       </>}
       value={togetherKey} onChange={value => updateSetup({ togetherKey: value })}
       required={needsUserKey} isError={showKeyError}

src/modules/t2i/prodia/ProdiaSettings.tsx

@@ -10,6 +10,7 @@ import StayPrimaryPortraitIcon from '@mui/icons-material/StayPrimaryPortrait';
 
 import { getBackendCapabilities } from '~/modules/backend/store-backend-capabilities';
 
+import { AlreadySet } from '~/common/components/AlreadySet';
 import { FormInputKey } from '~/common/components/forms/FormInputKey';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormRadioControl } from '~/common/components/forms/FormRadioControl';
@@ -80,7 +81,7 @@ export function ProdiaSettings(props: { noSkipKey?: boolean }) {
 
     {!backendHasProdia && !!props.noSkipKey && <FormInputKey
       autoCompleteId='prodia-key' label='Prodia API Key'
-      rightLabel={backendHasProdia ? '✔️ already set in server' : 'required'}
+      rightLabel={<AlreadySet required={!backendHasProdia} />}
       value={apiKey} onChange={setApiKey}
       required={!backendHasProdia} isError={!isValidKey}
     />}