109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import TypeaheadOverlay from "./typeahead-overlay.js";
|
||
import {
|
||
getAvailableModels,
|
||
RECOMMENDED_MODELS,
|
||
} from "../utils/model-utils.js";
|
||
import { Box, Text, useInput } from "ink";
|
||
import React, { useEffect, useState } from "react";
|
||
|
||
/**
|
||
* Props for <ModelOverlay>.
|
||
*
|
||
* When `hasLastResponse` is true the user has already received at least one
|
||
* assistant response in the current session which means switching models is no
|
||
* longer supported – the overlay should therefore show an error and only allow
|
||
* the user to close it.
|
||
*/
|
||
type Props = {
|
||
currentModel: string;
|
||
hasLastResponse: boolean;
|
||
onSelect: (model: string) => void;
|
||
onExit: () => void;
|
||
};
|
||
|
||
export default function ModelOverlay({
|
||
currentModel,
|
||
hasLastResponse,
|
||
onSelect,
|
||
onExit,
|
||
}: Props): JSX.Element {
|
||
const [items, setItems] = useState<Array<{ label: string; value: string }>>(
|
||
[],
|
||
);
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
const models = await getAvailableModels();
|
||
|
||
// Split the list into recommended and “other” models.
|
||
const recommended = RECOMMENDED_MODELS.filter((m) => models.includes(m));
|
||
const others = models.filter((m) => !recommended.includes(m));
|
||
|
||
const ordered = [...recommended, ...others.sort()];
|
||
|
||
setItems(
|
||
ordered.map((m) => ({
|
||
label: recommended.includes(m) ? `⭐ ${m}` : m,
|
||
value: m,
|
||
})),
|
||
);
|
||
})();
|
||
}, []);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// If the conversation already contains a response we cannot change the model
|
||
// anymore because the backend requires a consistent model across the entire
|
||
// run. In that scenario we replace the regular typeahead picker with a
|
||
// simple message instructing the user to start a new chat. The only
|
||
// available action is to dismiss the overlay (Esc or Enter).
|
||
// ---------------------------------------------------------------------------
|
||
|
||
// Always register input handling so hooks are called consistently.
|
||
useInput((_input, key) => {
|
||
if (hasLastResponse && (key.escape || key.return)) {
|
||
onExit();
|
||
}
|
||
});
|
||
|
||
if (hasLastResponse) {
|
||
return (
|
||
<Box
|
||
flexDirection="column"
|
||
borderStyle="round"
|
||
borderColor="gray"
|
||
width={80}
|
||
>
|
||
<Box paddingX={1}>
|
||
<Text bold color="red">
|
||
Unable to switch model
|
||
</Text>
|
||
</Box>
|
||
<Box paddingX={1}>
|
||
<Text>
|
||
You can only pick a model before the assistant sends its first
|
||
response. To use a different model please start a new chat.
|
||
</Text>
|
||
</Box>
|
||
<Box paddingX={1}>
|
||
<Text dimColor>press esc or enter to close</Text>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<TypeaheadOverlay
|
||
title="Switch model"
|
||
description={
|
||
<Text>
|
||
Current model: <Text color="greenBright">{currentModel}</Text>
|
||
</Text>
|
||
}
|
||
initialItems={items}
|
||
currentValue={currentModel}
|
||
onSelect={onSelect}
|
||
onExit={onExit}
|
||
/>
|
||
);
|
||
}
|