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

added collapsable chat area

Browse Source
This commit is contained in:
Dustin Loring 2024-12-01 07:23:15 -05:00
parent eb7676577d
commit c4347cb10d
1 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
@ -205,6 +206,23 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}, },
)} )}
> >
<div>
<div className="flex justify-between items-center mb-2">
<button
onClick={() => setIsModelSettingsCollapsed(!isModelSettingsCollapsed)}
className={classNames('flex items-center gap-2 p-2 rounded-lg transition-all', {
'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent':
isModelSettingsCollapsed,
'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentDefault':
!isModelSettingsCollapsed,
})}
>
<div className={`i-ph:caret-${isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
<span>Model Settings</span>
</button>
</div>
<div className={isModelSettingsCollapsed ? 'hidden' : ''}>
<ModelSelector <ModelSelector
key={provider?.name + ':' + modelList.length} key={provider?.name + ':' + modelList.length}
model={model} model={model}
@ -215,7 +233,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
providerList={PROVIDER_LIST} providerList={PROVIDER_LIST}
apiKeys={apiKeys} apiKeys={apiKeys}
/> />
{provider && ( {provider && (
<APIKeyManager <APIKeyManager
provider={provider} provider={provider}
@ -223,6 +240,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
setApiKey={(key) => updateApiKey(provider.name, key)} setApiKey={(key) => updateApiKey(provider.name, key)}
/> />
)} )}
</div>
</div>
<div <div
className={classNames( className={classNames(