UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-06 04:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #17 from dustinwloring1988/collapsible-model-and-provider

Browse Source 
added collapsable chat area
This commit is contained in:
Dustin Loring 2024-12-01 07:50:03 -05:00 committed by GitHub
commit 7066bfc564
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/chat/BaseChat.tsx
View File

@ -47,7 +47,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
key={provider?.name} key={provider?.name}
value={model} value={model}
onChange={(e) => setModel(e.target.value)} onChange={(e) => setModel(e.target.value)}
className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%] " className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%]"
> >
{[...modelList] {[...modelList]
.filter((e) => e.provider == provider?.name && e.name) .filter((e) => e.provider == provider?.name && e.name)
@ -116,6 +116,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
const [apiKeys, setApiKeys] = useState<Record<string, string>>({}); const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
const [modelList, setModelList] = useState(MODEL_LIST); const [modelList, setModelList] = useState(MODEL_LIST);
const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
useEffect(() => { useEffect(() => {
// Load API keys from cookies on component mount // Load API keys from cookies on component mount
@ -199,30 +200,48 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</ClientOnly> </ClientOnly>
<div <div
className={classNames( className={classNames(
' bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6', 'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
{ {
'sticky bottom-2': chatStarted, 'sticky bottom-2': chatStarted,
}, },
)} )}
> >
<ModelSelector <div>
key={provider?.name + ':' + modelList.length} <div className="flex justify-between items-center mb-2">
model={model} <button
setModel={setModel} onClick={() => setIsModelSettingsCollapsed(!isModelSettingsCollapsed)}
modelList={modelList} className={classNames('flex items-center gap-2 p-2 rounded-lg transition-all', {
provider={provider} 'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent':
setProvider={setProvider} isModelSettingsCollapsed,
providerList={PROVIDER_LIST} 'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentDefault':
apiKeys={apiKeys} !isModelSettingsCollapsed,
/> })}
>
<div className={`i-ph:caret-${isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
<span>Model Settings</span>
</button>
</div>
{provider && ( <div className={isModelSettingsCollapsed ? 'hidden' : ''}>
<APIKeyManager <ModelSelector
provider={provider} key={provider?.name + ':' + modelList.length}
apiKey={apiKeys[provider.name] || ''} model={model}
setApiKey={(key) => updateApiKey(provider.name, key)} setModel={setModel}
/> modelList={modelList}
)} provider={provider}
setProvider={setProvider}
providerList={PROVIDER_LIST}
apiKeys={apiKeys}
/>
{provider && (
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider.name] || ''}
setApiKey={(key) => updateApiKey(provider.name, key)}
/>
)}
</div>
</div>
<div <div
className={classNames( className={classNames(