Skip to content

Commit eb11029

Browse files
tjbcktjbck
committed
refac
1 parent e39ff71 commit eb11029

6 files changed

Lines changed: 145 additions & 144 deletions

File tree

‎src/lib/components/chat/MessageInput/CommandSuggestionList.svelte‎

Lines changed: 100 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -53,106 +53,103 @@
5353
}
5454
</script>
5555

56-
<DropdownMenu
57-
className="{(filteredItems ?? []).length > 0
58-
? ''
59-
: 'hidden'} w-72 font-sans text-xs"
60-
id="suggestions-container"
61-
>
62-
<div class="overflow-y-auto scrollbar-thin max-h-60">
63-
{#if char === '/'}
64-
<Prompts
65-
bind:this={suggestionElement}
66-
{query}
67-
bind:filteredItems
68-
onSelect={(e) => {
69-
const { type, data } = e;
70-
71-
if (type === 'prompt') {
72-
insertTextHandler(data.content);
73-
}
74-
}}
75-
/>
76-
{:else if char === '#'}
77-
<Knowledge
78-
bind:this={suggestionElement}
79-
{query}
80-
bind:filteredItems
81-
onSelect={(e) => {
82-
const { type, data } = e;
83-
84-
if (type === 'knowledge') {
85-
insertTextHandler('');
86-
87-
onUpload({
88-
type: 'file',
89-
data: data
90-
});
91-
} else if (type === 'web') {
92-
insertTextHandler('');
93-
94-
onUpload({
95-
type: 'web',
96-
data: data
97-
});
98-
}
99-
}}
100-
/>
101-
{:else if char === '@'}
102-
<Models
103-
bind:this={suggestionElement}
104-
{query}
105-
bind:filteredItems
106-
onSelect={(e) => {
107-
const { type, data } = e;
108-
109-
if (type === 'model') {
110-
insertTextHandler('');
111-
112-
onSelect({
113-
type: 'model',
114-
data: data
115-
});
116-
}
117-
}}
118-
/>
119-
{:else if char === '$'}
120-
<Skills
121-
bind:this={suggestionElement}
122-
{query}
123-
bind:filteredItems
124-
onSelect={(e) => {
125-
const { type, data } = e;
126-
127-
if (type === 'skill') {
128-
command({
129-
id: `${data.id}|${data.name}`,
130-
label: data.name
131-
});
132-
133-
onSelect({
134-
type: 'skill',
135-
data: data
136-
});
137-
}
138-
}}
139-
/>
140-
{:else if char === ':'}
141-
<Emojis
142-
bind:this={suggestionElement}
143-
{query}
144-
bind:filteredItems
145-
onSelect={(e) => {
146-
const { type, data } = e;
147-
148-
if (type === 'emoji') {
149-
command({
150-
id: data.name,
151-
label: data.shortCodes[0]
152-
});
153-
}
154-
}}
155-
/>
156-
{/if}
157-
</div>
158-
</DropdownMenu>
56+
<div class={(filteredItems ?? []).length > 0 ? '' : 'hidden'} id="suggestions-container">
57+
<DropdownMenu className="w-72 font-sans text-xs">
58+
<div class="overflow-y-auto scrollbar-thin max-h-60">
59+
{#if char === '/'}
60+
<Prompts
61+
bind:this={suggestionElement}
62+
{query}
63+
bind:filteredItems
64+
onSelect={(e) => {
65+
const { type, data } = e;
66+
67+
if (type === 'prompt') {
68+
insertTextHandler(data.content);
69+
}
70+
}}
71+
/>
72+
{:else if char === '#'}
73+
<Knowledge
74+
bind:this={suggestionElement}
75+
{query}
76+
bind:filteredItems
77+
onSelect={(e) => {
78+
const { type, data } = e;
79+
80+
if (type === 'knowledge') {
81+
insertTextHandler('');
82+
83+
onUpload({
84+
type: 'file',
85+
data: data
86+
});
87+
} else if (type === 'web') {
88+
insertTextHandler('');
89+
90+
onUpload({
91+
type: 'web',
92+
data: data
93+
});
94+
}
95+
}}
96+
/>
97+
{:else if char === '@'}
98+
<Models
99+
bind:this={suggestionElement}
100+
{query}
101+
bind:filteredItems
102+
onSelect={(e) => {
103+
const { type, data } = e;
104+
105+
if (type === 'model') {
106+
insertTextHandler('');
107+
108+
onSelect({
109+
type: 'model',
110+
data: data
111+
});
112+
}
113+
}}
114+
/>
115+
{:else if char === '$'}
116+
<Skills
117+
bind:this={suggestionElement}
118+
{query}
119+
bind:filteredItems
120+
onSelect={(e) => {
121+
const { type, data } = e;
122+
123+
if (type === 'skill') {
124+
command({
125+
id: `${data.id}|${data.name}`,
126+
label: data.name
127+
});
128+
129+
onSelect({
130+
type: 'skill',
131+
data: data
132+
});
133+
}
134+
}}
135+
/>
136+
{:else if char === ':'}
137+
<Emojis
138+
bind:this={suggestionElement}
139+
{query}
140+
bind:filteredItems
141+
onSelect={(e) => {
142+
const { type, data } = e;
143+
144+
if (type === 'emoji') {
145+
command({
146+
id: data.name,
147+
label: data.shortCodes[0]
148+
});
149+
}
150+
}}
151+
/>
152+
{/if}
153+
</div>
154+
</DropdownMenu>
155+
</div>

‎src/lib/components/chat/MessageInput/Commands/Emojis.svelte‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,15 @@
6464
</script>
6565

6666
{#if filteredItems.length > 0}
67-
<div class="px-2 text-xs text-gray-500 py-1">
67+
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
6868
{$i18n.t('Emojis')}
6969
</div>
7070

7171
{#each filteredItems as emoji, emojiIdx}
7272
<button
73-
class="px-2.5 py-1.5 rounded-xl w-full text-left {emojiIdx === selectedIdx
74-
? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
73+
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {emojiIdx ===
74+
selectedIdx
75+
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
7576
: ''}"
7677
type="button"
7778
on:click={() => {
@@ -83,14 +84,14 @@
8384
on:focus={() => {}}
8485
data-selected={emojiIdx === selectedIdx}
8586
>
86-
<div class="flex items-center gap-2 text-black dark:text-gray-100">
87+
<div class="flex min-w-0 items-center gap-2 text-black dark:text-gray-100">
8788
<img
8889
src="{WEBUI_BASE_URL}/assets/emojis/{emoji.name.toLowerCase()}.svg"
8990
alt={emoji.name}
90-
class="size-5 flex-shrink-0"
91+
class="size-4.5 flex-shrink-0"
9192
loading="lazy"
9293
/>
93-
<div class="truncate text-sm">
94+
<div class="truncate text-[13px]">
9495
:{emoji.shortCodes[0]}:
9596
</div>
9697
</div>

‎src/lib/components/chat/MessageInput/Commands/Knowledge.svelte‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
{#if filteredItems.length > 0 || query.startsWith('http')}
143143
{#each filteredItems as item, idx}
144144
{#if idx === 0 || item?.type !== items[idx - 1]?.type}
145-
<div class="px-2 text-xs text-gray-500 py-1">
145+
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
146146
{#if item?.type === 'folder'}
147147
{$i18n.t('Folders')}
148148
{:else if item?.type === 'collection'}
@@ -155,9 +155,9 @@
155155

156156
{#if !['youtube', 'web'].includes(item.type)}
157157
<button
158-
class=" px-2 py-1 rounded-xl w-full text-left flex justify-between items-center {idx ===
158+
class="flex h-[1.6875rem] w-full items-center justify-between rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {idx ===
159159
selectedIdx
160-
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
160+
? 'bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
161161
: ''}"
162162
type="button"
163163
on:click={() => {
@@ -172,7 +172,7 @@
172172
}}
173173
data-selected={idx === selectedIdx}
174174
>
175-
<div class=" text-black dark:text-gray-100 flex items-center gap-1">
175+
<div class="flex min-w-0 items-center gap-1.5 text-black dark:text-gray-100">
176176
<Tooltip
177177
content={item?.legacy
178178
? $i18n.t('Legacy')
@@ -184,16 +184,16 @@
184184
placement="top"
185185
>
186186
{#if item?.type === 'collection'}
187-
<Database className="size-4" />
187+
<Database className="size-3.5" />
188188
{:else if item?.type === 'folder'}
189-
<Folder className="size-4" />
189+
<Folder className="size-3.5" />
190190
{:else}
191-
<DocumentPage className="size-4" />
191+
<DocumentPage className="size-3.5" />
192192
{/if}
193193
</Tooltip>
194194

195195
<Tooltip content={`${decodeString(item?.name)}`} placement="top-start">
196-
<div class="line-clamp-1 flex-1">
196+
<div class="min-w-0 flex-1 truncate">
197197
{decodeString(item?.name)}
198198
</div>
199199
</Tooltip>
@@ -204,7 +204,7 @@
204204

205205
{#if isYoutubeUrl(query)}
206206
<button
207-
class="px-2 py-1 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button"
207+
class="flex h-[1.6875rem] w-full items-center rounded-xl bg-gray-50/40 px-2 text-left text-[13px] dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button"
208208
type="button"
209209
data-selected={selectedIdx === filteredItems.findIndex((i) => i.type === 'youtube')}
210210
on:click={() => {
@@ -220,19 +220,19 @@
220220
}
221221
}}
222222
>
223-
<div class=" text-black dark:text-gray-100 line-clamp-1 flex items-center gap-1">
223+
<div class="flex min-w-0 items-center gap-1.5 text-black dark:text-gray-100">
224224
<Tooltip content={$i18n.t('YouTube')} placement="top">
225-
<Youtube className="size-4" />
225+
<Youtube className="size-3.5" />
226226
</Tooltip>
227227

228-
<div class="truncate flex-1">
228+
<div class="min-w-0 flex-1 truncate">
229229
{query}
230230
</div>
231231
</div>
232232
</button>
233233
{:else if query.startsWith('http')}
234234
<button
235-
class="px-2 py-1 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button"
235+
class="flex h-[1.6875rem] w-full items-center rounded-xl bg-gray-50/40 px-2 text-left text-[13px] dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button"
236236
type="button"
237237
data-selected={selectedIdx === filteredItems.findIndex((i) => i.type === 'web')}
238238
on:click={() => {
@@ -248,12 +248,12 @@
248248
}
249249
}}
250250
>
251-
<div class=" text-black dark:text-gray-100 line-clamp-1 flex items-center gap-1">
251+
<div class="flex min-w-0 items-center gap-1.5 text-black dark:text-gray-100">
252252
<Tooltip content={$i18n.t('Web')} placement="top">
253-
<GlobeAlt className="size-4" />
253+
<GlobeAlt className="size-3.5" />
254254
</Tooltip>
255255

256-
<div class="truncate flex-1">
256+
<div class="min-w-0 flex-1 truncate">
257257
{query}
258258
</div>
259259
</div>

‎src/lib/components/chat/MessageInput/Commands/Models.svelte‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,17 @@
6060
};
6161
</script>
6262

63-
<div class="px-2 text-xs text-gray-500 py-1">
63+
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
6464
{$i18n.t('Models')}
6565
</div>
6666

6767
{#if filteredItems.length > 0}
6868
{#each filteredItems as model, modelIdx}
6969
<Tooltip content={model.id} placement="top-start">
7070
<button
71-
class="px-2.5 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
72-
? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
71+
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {modelIdx ===
72+
selectedIdx
73+
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
7374
: ''}"
7475
type="button"
7576
on:click={() => {
@@ -81,16 +82,16 @@
8182
on:focus={() => {}}
8283
data-selected={modelIdx === selectedIdx}
8384
>
84-
<div class="flex text-black dark:text-gray-100 line-clamp-1">
85+
<div class="flex min-w-0 items-center text-black dark:text-gray-100">
8586
<img
8687
src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
8788
alt={model?.name ?? model.id}
88-
class="rounded-full size-5 items-center mr-2"
89+
class="mr-2 size-4.5 rounded-full object-cover"
8990
on:error={(e) => {
9091
e.currentTarget.src = '/favicon.png';
9192
}}
9293
/>
93-
<div class="truncate">
94+
<div class="min-w-0 truncate">
9495
{model.name}
9596
</div>
9697
</div>

0 commit comments

Comments
 (0)