Skip to content

Commit 26d66fd

Browse files
ShenKSPZShenKSPZ
committed
Layout: Polishing layout & animation 99%
1 parent db1a7ad commit 26d66fd

File tree

10 files changed

+366
-155
lines changed

10 files changed

+366
-155
lines changed

‎src/components/chat/ChatMessageArea.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
306306
handleCancelEdit();
307307
}
308308
}}
309-
className="w-[80%] px-3 py-2 input-border rounded-lg cursor-text transition-all duration-200"
309+
className="w-[80%] px-3 py-2 form-textarea-border rounded-lg cursor-text transition-all duration-200"
310310
>
311311
<textarea
312312
ref={editingContentRef}
@@ -320,13 +320,13 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
320320
<button
321321
type="button"
322322
onClick={handleCancelEdit}
323-
className="p-2 text-sm text-red-400 transition-all duration-200 rounded-md hover:text-red-500 message-icon"
323+
className="p-2 text-sm text-red-400 transition-all duration-200 rounded-md hover:text-red-500 message-icon-btn"
324324
>
325325
<X size={18} />
326326
</button>
327327
<button
328328
type="submit"
329-
className="p-2 text-sm transition-all duration-200 rounded-md message-icon"
329+
className="p-2 text-sm transition-all duration-200 rounded-md message-icon-btn"
330330
disabled={!editingContent.trim()}
331331
>
332332
<Check size={18} />
@@ -408,7 +408,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
408408
onFocus={() => {
409409
inputRef.current?.focus();
410410
}}
411-
className="flex flex-col gap-2 px-4 pt-3 pb-2 m-2 mb-4 transition-all duration-200 rounded-lg input-border cursor-text"
411+
className="flex flex-col gap-2 px-4 pt-3 pb-2 m-2 mb-4 transition-all duration-200 rounded-lg form-textarea-border cursor-text"
412412
>
413413
<div className="flex space-x-2">
414414
<textarea

‎src/components/models/SelectModelDialog.tsx

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react';
2-
import { Search, Loader, Check, ChevronDown, ChevronUp, X } from 'lucide-react';
2+
import { Search, Check, ChevronDown, ChevronUp, X, Loader2 } from 'lucide-react';
33
import { AIService, ModelOption } from '../../services/ai-service';
44
import { SettingsService } from '../../services/settings-service';
55

@@ -57,15 +57,15 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
5757
}
5858
};
5959

60-
const handleRefresh = async () => {
61-
try {
62-
await aiService.refreshModels();
63-
const refreshedModels = await aiService.getCachedAllModels();
64-
setModels(refreshedModels);
65-
} catch (error) {
66-
console.error("Error refreshing models:", error);
67-
}
68-
};
60+
// const handleRefresh = async () => {
61+
// try {
62+
// await aiService.refreshModels();
63+
// const refreshedModels = await aiService.getCachedAllModels();
64+
// setModels(refreshedModels);
65+
// } catch (error) {
66+
// console.error("Error refreshing models:", error);
67+
// }
68+
// };
6969

7070
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
7171
setSearchQuery(e.target.value);
@@ -110,9 +110,15 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
110110
if (!isOpen) return null;
111111

112112
return (
113-
<div className="fixed inset-0 z-40 flex items-center justify-center bg-[#00000033]">
114-
<div className="flex flex-col w-3/4 p-4 h-4/5 select-model-dialog">
115-
<div className="flex items-center justify-between pb-2 border-b border-gray-700">
113+
<div
114+
className="fixed inset-0 z-40 flex items-center justify-center bg-[#00000033] fade-in app-region-no-drag"
115+
onClick={onClose}
116+
>
117+
<div
118+
className="flex flex-col w-3/4 p-4 h-4/5 select-model-dialog move-in"
119+
onClick={(e) => e.stopPropagation()}
120+
>
121+
<div className="flex items-center justify-between pb-2 border-b frame-separator-border-color">
116122
<h2 className="p-2 text-xl font-semibold">Select Model</h2>
117123
<button
118124
onClick={onClose}
@@ -123,37 +129,37 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
123129
</button>
124130
</div>
125131

126-
<div className="flex items-center justify-between p-4 border-b border-gray-700">
132+
<div className="flex items-center justify-between p-4 border-b frame-separator-border-color">
127133
<div className="relative flex-1 max-w-md">
128134
<input
129135
type="text"
130136
placeholder="Search models..."
131137
value={searchQuery}
132138
onChange={handleSearch}
133-
className="w-full p-2 pl-10 text-white bg-gray-800 border border-gray-700 rounded-md focus:border-blue-500 focus:outline-none"
139+
className="w-full p-2 pl-10 rounded-md input-box"
134140
/>
135-
<div className="absolute text-gray-400 transform -translate-y-1/2 left-3 top-1/2">
141+
<div className="absolute transform -translate-y-1/2 left-3 top-1/2">
136142
<Search size={16} />
137143
</div>
138144
</div>
139145

140-
<button
146+
{/* <button
141147
onClick={handleRefresh}
142148
disabled={isLoading}
143149
className="flex items-center gap-2 px-4 py-2 ml-4 text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
144150
>
145151
{isLoading ? (
146-
<Loader className="animate-spin" size={16} />
152+
<Loader2 className="animate-spin" size={16} />
147153
) : (
148154
'Refresh Models'
149155
)}
150-
</button>
156+
</button> */}
151157
</div>
152158

153159
<div className="flex-1 p-4 overflow-y-auto">
154160
{isLoading && models.length === 0 ? (
155161
<div className="flex flex-col items-center justify-center h-64">
156-
<Loader className="mb-4 text-4xl text-blue-500 animate-spin" size={40} />
162+
<Loader2 className="mb-4 text-4xl text-blue-500 animate-spin" size={40} />
157163
<p className="text-gray-400">Loading available models...</p>
158164
</div>
159165
) : filteredModels.length === 0 ? (
@@ -166,10 +172,10 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
166172
<div key={providerId} className="mb-6">
167173

168174
<div className="flex items-start justify-start">
169-
<h3 className="mb-2 text-lg font-medium text-white">{getProviderName(providerId)}</h3>
175+
<h3 className="mb-2 text-lg font-medium">{getProviderName(providerId)}</h3>
170176
<button
171177
onClick={() => handleCollapseProvider(providerId)}
172-
className="p-1 ml-2 text-gray-400 bg-gray-800 rounded-md hover:text-white"
178+
className="p-1 ml-2 select-model-dialog-expand-button"
173179
>
174180
{collapsedList.get(providerId) ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
175181
</button>
@@ -182,8 +188,8 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
182188
onClick={() => handleSelectModel(model, providerId)}
183189
className={`flex items-center justify-between p-3 rounded-lg cursor-pointer ${
184190
(selectedModelId === model.id && selectedProviderId === providerId)
185-
? 'bg-blue-600 text-white'
186-
: 'bg-gray-800 text-gray-200 hover:bg-gray-700'
191+
? 'settings-provider-item-selected settings-provider-item-selected-text'
192+
: 'settings-provider-item settings-provider-item-tex'
187193
}`}
188194
>
189195
<div className="flex-1">
@@ -195,7 +201,7 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
195201
)}
196202
</div>
197203
{(selectedModelId === model.id && selectedProviderId === providerId) && (
198-
<div className="ml-4 text-white">
204+
<div className="ml-4">
199205
<Check size={16} />
200206
</div>
201207
)}

‎src/components/pages/SettingsPage.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
2121
const [selectedProvider, setSelectedProvider] = useState<string>('TensorBlock');
2222
const [providerSettings, setProviderSettings] = useState<Record<string, ProviderSettings>>({});
2323
const [selectedModel, setSelectedModel] = useState('');
24-
const [useStreaming, setUseStreaming] = useState(true);
24+
const [useWebSearch, setUseWebSearch] = useState(true);
2525
const [isDbInitialized, setIsDbInitialized] = useState(false);
2626
const [hasApiKeyChanged, setHasApiKeyChanged] = useState(false);
2727
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -54,7 +54,7 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
5454
setSelectedProvider(settings.selectedProvider);
5555
setProviderSettings(settings.providers);
5656
setSelectedModel(settings.selectedModel);
57-
setUseStreaming(settings.useStreaming);
57+
setUseWebSearch(settings.webSearchEnabled);
5858
setHasApiKeyChanged(false);
5959
lastOpenedSettings.current = true;
6060
}
@@ -76,9 +76,10 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
7676
setSelectedModel(modelId);
7777
};
7878

79-
// Handle streaming setting change
80-
const handleStreamingChange = (enabled: boolean) => {
81-
setUseStreaming(enabled);
79+
// Handle web search setting change
80+
const handleWebSearchChange = (enabled: boolean) => {
81+
console.log('Web search setting changed to: ', enabled);
82+
setUseWebSearch(enabled);
8283
};
8384

8485
const handleProviderSettingsChange = (newSettings: ProviderSettings) => {
@@ -113,7 +114,7 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
113114
// Update all settings in one go
114115
await settingsService.updateSettings({
115116
providers: providerSettings,
116-
useStreaming: useStreaming
117+
webSearchEnabled: useWebSearch
117118
});
118119

119120
// Refresh models if API key has changed
@@ -281,8 +282,8 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
281282
{/* Chat Settings Tab */}
282283
{activeTab === 'chat' && (
283284
<ChatSettings
284-
useStreaming={useStreaming}
285-
onStreamingChange={handleStreamingChange}
285+
useWebSearch={useWebSearch}
286+
onWebSearchChange={handleWebSearchChange}
286287
onSaveSettings={handleSave}
287288
/>
288289
)}

0 commit comments

Comments
 (0)