Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Settings section improvement #918

Merged
merged 15 commits into from
Aug 5, 2024
Merged

Settings section improvement #918

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
72e9dfc
show no api keys needed for selected model
andrewfulton9 Jul 27, 2024
039c844
checks for existing key in rendering so No API Keys message doesn't a…
andrewfulton9 Jul 29, 2024
0e47055
Handle not having language and embedding models
andrewfulton9 Jul 29, 2024
c10bfa1
lint
andrewfulton9 Jul 29, 2024
7d9ae84
inline_completer
andrewfulton9 Jul 29, 2024
4bdb545
Merge branch 'main' into settings_section_improvement
andrewfulton9 Jul 30, 2024
4c3720f
Update packages/jupyter-ai/src/components/chat-settings.tsx
andrewfulton9 Jul 30, 2024
2f86b4c
Update packages/jupyter-ai/src/components/chat-settings.tsx
andrewfulton9 Jul 30, 2024
7866fe9
Update packages/jupyter-ai/src/components/chat-settings.tsx
andrewfulton9 Jul 30, 2024
b5fc011
review fixes
andrewfulton9 Jul 30, 2024
31336e1
addressing reviews
andrewfulton9 Aug 2, 2024
63cb190
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 2, 2024
bed7ac8
lint
andrewfulton9 Aug 2, 2024
77be513
Merge branch 'settings_section_improvement' of github.com:andrewfulto…
andrewfulton9 Aug 2, 2024
c1d80ef
Merge remote-tracking branch 'upstream/main' into settings_section_im…
andrewfulton9 Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
354 changes: 185 additions & 169 deletions packages/jupyter-ai/src/components/chat-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,31 +146,20 @@ export function ChatSettings(props: ChatSettingsProps): JSX.Element {
const newApiKeys: Record<string, string> = {};
const lmAuth = lmProvider?.auth_strategy;
const emAuth = emProvider?.auth_strategy;
if (
lmAuth?.type === 'env' &&
!server.config.api_keys.includes(lmAuth.name)
) {
if (lmAuth?.type === 'env') {
dlqqq marked this conversation as resolved.
Show resolved Hide resolved
newApiKeys[lmAuth.name] = '';
}
if (lmAuth?.type === 'multienv') {
lmAuth.names.forEach(apiKey => {
if (!server.config.api_keys.includes(apiKey)) {
newApiKeys[apiKey] = '';
}
newApiKeys[apiKey] = '';
});
}

if (
emAuth?.type === 'env' &&
!server.config.api_keys.includes(emAuth.name)
) {
if (emAuth?.type === 'env') {
newApiKeys[emAuth.name] = '';
}
if (emAuth?.type === 'multienv') {
emAuth.names.forEach(apiKey => {
if (!server.config.api_keys.includes(apiKey)) {
newApiKeys[apiKey] = '';
}
newApiKeys[apiKey] = '';
});
dlqqq marked this conversation as resolved.
Show resolved Hide resolved
}

Expand Down Expand Up @@ -303,89 +292,102 @@ export function ChatSettings(props: ChatSettingsProps): JSX.Element {
>
Language model
</h2>
<Select
value={lmProvider?.registry ? lmProvider.id + ':*' : lmGlobalId}
label="Completion model"
onChange={e => {
const lmGid = e.target.value === 'null' ? null : e.target.value;
if (lmGid === null) {
setLmProvider(null);
return;
}

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextLmProvider = getProvider(lmGid, server.lmProviders)!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextLmLocalId = getModelLocalId(lmGid)!;

setLmProvider(nextLmProvider);
setChatHelpMarkdown(nextLmProvider?.help ?? null);
if (nextLmProvider.registry) {
setLmLocalId('');
setShowLmLocalId(true);
} else {
setLmLocalId(nextLmLocalId);
setShowLmLocalId(false);
}
}}
MenuProps={{ sx: { maxHeight: '50%', minHeight: 400 } }}
>
<MenuItem value="null">None</MenuItem>
{server.lmProviders.providers.map(lmp =>
lmp.models
.filter(lm => lmp.chat_models.includes(lm))
.map(lm => (
<MenuItem value={`${lmp.id}:${lm}`}>
{lmp.name} :: {lm}
</MenuItem>
))
)}
</Select>
{showLmLocalId && (
<TextField
label={lmProvider?.model_id_label || 'Local model ID'}
value={lmLocalId}
onChange={e => setLmLocalId(e.target.value)}
fullWidth
/>
)}
{chatHelpMarkdown && (
<RendermimeMarkdown
rmRegistry={props.rmRegistry}
markdownStr={chatHelpMarkdown}
complete
/>
)}
{lmGlobalId && (
<ModelFields
fields={lmProvider?.fields}
values={fields}
onChange={setFields}
/>

{server.lmProviders.providers
.map(lmp => lmp.chat_models.length)
.reduce((partialSum, num) => partialSum + num, 0) > 0 ? (
<Box>
<Select
value={lmProvider?.registry ? lmProvider.id + ':*' : lmGlobalId}
label="Completion model"
onChange={e => {
const lmGid = e.target.value === 'null' ? null : e.target.value;
if (lmGid === null) {
setLmProvider(null);
return;
}

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextLmProvider = getProvider(lmGid, server.lmProviders)!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextLmLocalId = getModelLocalId(lmGid)!;

setLmProvider(nextLmProvider);
setChatHelpMarkdown(nextLmProvider?.help ?? null);
if (nextLmProvider.registry) {
setLmLocalId('');
setShowLmLocalId(true);
} else {
setLmLocalId(nextLmLocalId);
setShowLmLocalId(false);
}
}}
MenuProps={{ sx: { maxHeight: '50%', minHeight: 400 } }}
>
<MenuItem value="null">None</MenuItem>
{server.lmProviders.providers.map(lmp =>
lmp.models
.filter(lm => lmp.chat_models.includes(lm))
.map(lm => (
<MenuItem value={`${lmp.id}:${lm}`}>
{lmp.name} :: {lm}
</MenuItem>
))
)}
</Select>
{showLmLocalId && (
<TextField
label={lmProvider?.model_id_label || 'Local model ID'}
value={lmLocalId}
onChange={e => setLmLocalId(e.target.value)}
fullWidth
/>
)}
{chatHelpMarkdown && (
<RendermimeMarkdown
rmRegistry={props.rmRegistry}
markdownStr={chatHelpMarkdown}
complete
/>
)}
{lmGlobalId && (
<ModelFields
fields={lmProvider?.fields}
values={fields}
onChange={setFields}
/>
)}
</Box>
) : (
<p>No language models available.</p>
)}

{/* Embedding model section */}
<h2 className="jp-ai-ChatSettings-header">Embedding model</h2>
<Select
value={emGlobalId}
label="Embedding model"
onChange={e => {
const emGid = e.target.value === 'null' ? null : e.target.value;
setEmGlobalId(emGid);
}}
MenuProps={{ sx: { maxHeight: '50%', minHeight: 400 } }}
>
<MenuItem value="null">None</MenuItem>
{server.emProviders.providers.map(emp =>
emp.models
.filter(em => em !== '*') // TODO: support registry providers
.map(em => (
<MenuItem value={`${emp.id}:${em}`}>
{emp.name} :: {em}
</MenuItem>
))
)}
</Select>
{server.emProviders.providers.length > 0 ? (
<Select
value={emGlobalId}
label="Embedding model"
onChange={e => {
const emGid = e.target.value === 'null' ? null : e.target.value;
setEmGlobalId(emGid);
}}
MenuProps={{ sx: { maxHeight: '50%', minHeight: 400 } }}
>
<MenuItem value="null">None</MenuItem>
{server.emProviders.providers.map(emp =>
emp.models
.filter(em => em !== '*') // TODO: support registry providers
.map(em => (
<MenuItem value={`${emp.id}:${em}`}>
{emp.name} :: {em}
</MenuItem>
))
)}
</Select>
) : (
<p>No embedding models available.</p>
)}

{/* Completer language model section */}
<h2 className="jp-ai-ChatSettings-header">
Expand All @@ -397,86 +399,100 @@ export function ChatSettings(props: ChatSettingsProps): JSX.Element {
selection={clmProvider}
/>
</h2>
<Select
value={clmProvider?.registry ? clmProvider.id + ':*' : clmGlobalId}
label="Inline completion model"
disabled={!isCompleterEnabled}
onChange={e => {
const clmGid = e.target.value === 'null' ? null : e.target.value;
if (clmGid === null) {
setClmProvider(null);
return;
}

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextClmProvider = getProvider(clmGid, server.lmProviders)!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextClmLocalId = getModelLocalId(clmGid)!;

setClmProvider(nextClmProvider);
setCompletionHelpMarkdown(nextClmProvider?.help ?? null);
if (nextClmProvider.registry) {
setClmLocalId('');
setShowClmLocalId(true);
} else {
setClmLocalId(nextClmLocalId);
setShowClmLocalId(false);
}
}}
MenuProps={{ sx: { maxHeight: '50%', minHeight: 400 } }}
>
<MenuItem value="null">None</MenuItem>
{server.lmProviders.providers.map(lmp =>
lmp.models
.filter(lm => lmp.completion_models.includes(lm))
.map(lm => (
<MenuItem value={`${lmp.id}:${lm}`}>
{lmp.name} :: {lm}
</MenuItem>
))
)}
</Select>
{showClmLocalId && (
<TextField
label={clmProvider?.model_id_label || 'Local model ID'}
value={clmLocalId}
onChange={e => setClmLocalId(e.target.value)}
fullWidth
/>
)}
{completionHelpMarkdown && (
<RendermimeMarkdown
rmRegistry={props.rmRegistry}
markdownStr={completionHelpMarkdown}
complete
/>
)}
{clmGlobalId && (
<ModelFields
fields={clmProvider?.fields}
values={fields}
onChange={setFields}
/>
{server.lmProviders.providers
.map(lmp => lmp.completion_models.length)
.reduce((partialSum, num) => partialSum + num, 0) > 0 ? (
<Box>
<Select
value={clmProvider?.registry ? clmProvider.id + ':*' : clmGlobalId}
label="Inline completion model"
disabled={!isCompleterEnabled}
onChange={e => {
const clmGid = e.target.value === 'null' ? null : e.target.value;
if (clmGid === null) {
setClmProvider(null);
return;
}

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextClmProvider = getProvider(clmGid, server.lmProviders)!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nextClmLocalId = getModelLocalId(clmGid)!;

setClmProvider(nextClmProvider);
setCompletionHelpMarkdown(nextClmProvider?.help ?? null);
if (nextClmProvider.registry) {
setClmLocalId('');
setShowClmLocalId(true);
} else {
setClmLocalId(nextClmLocalId);
setShowClmLocalId(false);
}
}}
MenuProps={{ sx: { maxHeight: '50%', minHeight: 400 } }}
>
<MenuItem value="null">None</MenuItem>
{server.lmProviders.providers.map(lmp =>
lmp.models
.filter(lm => lmp.completion_models.includes(lm))
.map(lm => (
<MenuItem value={`${lmp.id}:${lm}`}>
{lmp.name} :: {lm}
</MenuItem>
))
)}
</Select>
{showClmLocalId && (
<TextField
label={clmProvider?.model_id_label || 'Local model ID'}
value={clmLocalId}
onChange={e => setClmLocalId(e.target.value)}
fullWidth
/>
)}
{completionHelpMarkdown && (
<RendermimeMarkdown
rmRegistry={props.rmRegistry}
markdownStr={completionHelpMarkdown}
complete
/>
)}
{clmGlobalId && (
<ModelFields
fields={clmProvider?.fields}
values={fields}
onChange={setFields}
/>
)}
</Box>
) : (
<p>No Inline Completion models.</p>
)}

{/* API Keys section */}
<h2 className="jp-ai-ChatSettings-header">API Keys</h2>
{/* API key inputs for newly-used providers */}
{Object.entries(apiKeys).map(([apiKeyName, apiKeyValue], idx) => (
<TextField
key={idx}
label={apiKeyName}
value={apiKeyValue}
fullWidth
type="password"
onChange={e =>
setApiKeys(apiKeys => ({
...apiKeys,
[apiKeyName]: e.target.value
}))
}
/>
))}
{Object.entries(apiKeys).length === 0 ? (
<p>No API Keys needed for selected model.</p>
dlqqq marked this conversation as resolved.
Show resolved Hide resolved
) : (
Object.entries(apiKeys).map(([apiKeyName, apiKeyValue], idx) =>
!server.config.api_keys.includes(apiKeyName) ? (
<TextField
key={idx}
label={apiKeyName}
value={apiKeyValue}
fullWidth
type="password"
onChange={e =>
setApiKeys(apiKeys => ({
...apiKeys,
[apiKeyName]: e.target.value
}))
}
/>
) : null
)
)}
{/* Pre-existing API keys */}
<ExistingApiKeys
alert={apiKeysAlert}
Expand Down
Loading