Skip to content

Commit 3a6c88a

Browse files
tjbcktjbck
committed
refac
1 parent 3be0613 commit 3a6c88a

1 file changed

Lines changed: 102 additions & 49 deletions

File tree

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

Lines changed: 102 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,10 @@
6666
6767
// Disable all direct terminals when switching to a system terminal
6868
if ($settings?.terminalServers?.some((s) => s.enabled)) {
69-
const updatedServers = ($settings.terminalServers ?? []).map((s) => ({ ...s, enabled: false }));
69+
const updatedServers = ($settings.terminalServers ?? []).map((s) => ({
70+
...s,
71+
enabled: false
72+
}));
7073
settings.set({
7174
...$settings,
7275
terminalServers: updatedServers
@@ -111,17 +114,29 @@
111114
<!-- Direct terminals (gated by permission) -->
112115
{#if $user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true)}
113116
<div class="flex items-center justify-between px-3 py-1">
114-
<span class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">
117+
<span
118+
class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
119+
>
115120
{$i18n.t('Direct')}
116121
</span>
117122
<Tooltip content={$i18n.t('Add Terminal')} placement="top">
118123
<button
119124
type="button"
120125
class="p-0.5 rounded-md text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition"
121-
on:click|stopPropagation={() => { show = false; showSettings.set(true); }}
126+
on:click|stopPropagation={() => {
127+
show = false;
128+
showSettings.set(true);
129+
}}
122130
>
123-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
124-
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
131+
<svg
132+
xmlns="http://www.w3.org/2000/svg"
133+
viewBox="0 0 20 20"
134+
fill="currentColor"
135+
class="size-3.5"
136+
>
137+
<path
138+
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
139+
/>
125140
</svg>
126141
</button>
127142
</Tooltip>
@@ -130,69 +145,107 @@
130145
{#each directTerminals as terminal}
131146
<button
132147
type="button"
133-
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId === terminal.url
148+
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId ===
149+
terminal.url
134150
? 'bg-gray-50 dark:bg-gray-800/50'
135151
: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
136152
on:click={() => selectDirect(terminal)}
137153
>
138154
<div class="flex flex-1 gap-2 items-center truncate">
139155
<Cloud className="size-4 shrink-0" strokeWidth="2" />
140-
<span class="truncate">{terminal.name || terminal.url.replace(/^https?:\/\//, '')}</span>
156+
<span class="truncate"
157+
>{terminal.name || terminal.url.replace(/^https?:\/\//, '')}</span
158+
>
141159
</div>
142160
{#if $selectedTerminalId === terminal.url}
143161
<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
144-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
145-
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
162+
<svg
163+
xmlns="http://www.w3.org/2000/svg"
164+
viewBox="0 0 20 20"
165+
fill="currentColor"
166+
class="size-4"
167+
>
168+
<path
169+
fill-rule="evenodd"
170+
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
171+
clip-rule="evenodd"
172+
/>
146173
</svg>
147174
</div>
148175
{/if}
149176
</button>
150177
{/each}
151178

152-
<hr class="border-gray-100 dark:border-gray-800 my-1" />
179+
{#if directTerminals.length > 0 && systemTerminals.length > 0}
180+
<hr class="border-gray-100 dark:border-gray-800 my-1" />
181+
{/if}
153182
{/if}
154183

155184
<!-- System terminals -->
156-
<div class="flex items-center justify-between px-3 py-1">
157-
<span class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">
158-
{$i18n.t('System')}
159-
</span>
160-
{#if $user?.role === 'admin'}
161-
<Tooltip content={$i18n.t('Add Terminal')} placement="top">
162-
<button
163-
type="button"
164-
class="p-0.5 rounded-md text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition"
165-
on:click|stopPropagation={() => { show = false; goto('/admin/settings/integrations'); }}
166-
>
167-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
168-
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
169-
</svg>
170-
</button>
171-
</Tooltip>
172-
{/if}
173-
</div>
174-
175-
{#each systemTerminals as terminal}
176-
<button
177-
type="button"
178-
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId === terminal.id
179-
? 'bg-gray-50 dark:bg-gray-800/50'
180-
: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
181-
on:click={() => selectSystem(terminal)}
182-
>
183-
<div class="flex flex-1 gap-2 items-center truncate">
184-
<Cloud className="size-4 shrink-0" strokeWidth="2" />
185-
<span class="truncate">{terminal.name || $i18n.t('Terminal')}</span>
186-
</div>
187-
{#if $selectedTerminalId === terminal.id}
188-
<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
189-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
190-
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
191-
</svg>
192-
</div>
185+
{#if systemTerminals.length > 0}
186+
<div class="flex items-center justify-between px-3 py-1">
187+
<span
188+
class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
189+
>
190+
{$i18n.t('System')}
191+
</span>
192+
{#if $user?.role === 'admin'}
193+
<Tooltip content={$i18n.t('Add Terminal')} placement="top">
194+
<button
195+
type="button"
196+
class="p-0.5 rounded-md text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition"
197+
on:click|stopPropagation={() => {
198+
show = false;
199+
goto('/admin/settings/integrations');
200+
}}
201+
>
202+
<svg
203+
xmlns="http://www.w3.org/2000/svg"
204+
viewBox="0 0 20 20"
205+
fill="currentColor"
206+
class="size-3.5"
207+
>
208+
<path
209+
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
210+
/>
211+
</svg>
212+
</button>
213+
</Tooltip>
193214
{/if}
194-
</button>
195-
{/each}
215+
</div>
216+
217+
{#each systemTerminals as terminal}
218+
<button
219+
type="button"
220+
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId ===
221+
terminal.id
222+
? 'bg-gray-50 dark:bg-gray-800/50'
223+
: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
224+
on:click={() => selectSystem(terminal)}
225+
>
226+
<div class="flex flex-1 gap-2 items-center truncate">
227+
<Cloud className="size-4 shrink-0" strokeWidth="2" />
228+
<span class="truncate">{terminal.name || $i18n.t('Terminal')}</span>
229+
</div>
230+
{#if $selectedTerminalId === terminal.id}
231+
<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
232+
<svg
233+
xmlns="http://www.w3.org/2000/svg"
234+
viewBox="0 0 20 20"
235+
fill="currentColor"
236+
class="size-4"
237+
>
238+
<path
239+
fill-rule="evenodd"
240+
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
241+
clip-rule="evenodd"
242+
/>
243+
</svg>
244+
</div>
245+
{/if}
246+
</button>
247+
{/each}
248+
{/if}
196249
</DropdownMenu.Content>
197250
</div>
198251
</Dropdown>

0 commit comments

Comments
 (0)