victor HF Staff commited on
Commit
f87f7a2
·
1 Parent(s): 9f5b451

Show selected MCP server icons in ChatInput

Browse files
src/lib/components/chat/ChatInput.svelte CHANGED
@@ -203,6 +203,9 @@
203
  // Show file upload when any mime is allowed (text always; images if multimodal)
204
  let showFileUpload = $derived(mimeTypes.length > 0);
205
  let showNoTools = $derived(!showFileUpload);
 
 
 
206
  </script>
207
 
208
  <div class="flex min-h-full flex-1 flex-col" onpaste={onPaste}>
@@ -382,7 +385,7 @@
382
 
383
  {#if $enabledServersCount > 0}
384
  <div
385
- class="ml-2 inline-flex h-7 items-center gap-1.5 rounded-full border border-blue-500/10 bg-blue-600/10 pl-3 pr-1 text-xs font-semibold text-blue-700 dark:bg-blue-600/20 dark:text-blue-400"
386
  class:grayscale={!modelSupportsTools}
387
  class:opacity-60={!modelSupportsTools}
388
  class:cursor-help={!modelSupportsTools}
@@ -391,12 +394,28 @@
391
  : "Current model doesn’t support tools"}
392
  >
393
  <button
394
- class="cursor-pointer select-none bg-transparent p-0 leading-none text-current focus:outline-none"
395
  type="button"
396
  title="Manage MCP Servers"
397
  onclick={() => (isMcpManagerOpen = true)}
398
  class:line-through={!modelSupportsTools}
399
  >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
400
  MCP ({$enabledServersCount})
401
  </button>
402
  <button
 
203
  // Show file upload when any mime is allowed (text always; images if multimodal)
204
  let showFileUpload = $derived(mimeTypes.length > 0);
205
  let showNoTools = $derived(!showFileUpload);
206
+ let selectedServers = $derived(
207
+ $allMcpServers.filter((server) => $selectedServerIds.has(server.id))
208
+ );
209
  </script>
210
 
211
  <div class="flex min-h-full flex-1 flex-col" onpaste={onPaste}>
 
385
 
386
  {#if $enabledServersCount > 0}
387
  <div
388
+ class="ml-2 inline-flex h-7 items-center gap-1.5 rounded-full border border-blue-500/10 bg-blue-600/10 pl-2 pr-1 text-xs font-semibold text-blue-700 dark:bg-blue-600/20 dark:text-blue-400"
389
  class:grayscale={!modelSupportsTools}
390
  class:opacity-60={!modelSupportsTools}
391
  class:cursor-help={!modelSupportsTools}
 
394
  : "Current model doesn’t support tools"}
395
  >
396
  <button
397
+ class="inline-flex cursor-pointer select-none items-center gap-1 bg-transparent p-0 leading-none text-current focus:outline-none"
398
  type="button"
399
  title="Manage MCP Servers"
400
  onclick={() => (isMcpManagerOpen = true)}
401
  class:line-through={!modelSupportsTools}
402
  >
403
+ {#if selectedServers.length}
404
+ <span class="flex items-center -space-x-1">
405
+ {#each selectedServers.slice(0, 3) as server (server.id)}
406
+ <img
407
+ src={getMcpServerFaviconUrl(server.url)}
408
+ alt=""
409
+ class="size-4 rounded bg-white p-px shadow-sm ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10"
410
+ />
411
+ {/each}
412
+ {#if selectedServers.length > 3}
413
+ <span class="ml-1 text-[10px] font-semibold text-blue-800 dark:text-blue-200">
414
+ +{selectedServers.length - 3}
415
+ </span>
416
+ {/if}
417
+ </span>
418
+ {/if}
419
  MCP ({$enabledServersCount})
420
  </button>
421
  <button
src/routes/conversation/[id]/+page.svelte CHANGED
@@ -287,9 +287,7 @@
287
  // final text once tools complete, while preserving any
288
  // pre‑tool streamed content when appropriate.
289
  const hadTools =
290
- messageToWriteTo.updates?.some(
291
- (u) => u.type === MessageUpdateType.Tool
292
- ) ?? false;
293
 
294
  if (hadTools) {
295
  const existing = messageToWriteTo.content;
@@ -316,10 +314,8 @@
316
  messageToWriteTo.content = finalText;
317
  } else {
318
  // C. Merge with a paragraph break for readability.
319
- const needsGap =
320
- !/\n\n$/.test(existing) && !/^\n/.test(finalText ?? "");
321
- messageToWriteTo.content =
322
- existing + (needsGap ? "\n\n" : "") + finalText;
323
  }
324
  } else {
325
  messageToWriteTo.content = finalText;
 
287
  // final text once tools complete, while preserving any
288
  // pre‑tool streamed content when appropriate.
289
  const hadTools =
290
+ messageToWriteTo.updates?.some((u) => u.type === MessageUpdateType.Tool) ?? false;
 
 
291
 
292
  if (hadTools) {
293
  const existing = messageToWriteTo.content;
 
314
  messageToWriteTo.content = finalText;
315
  } else {
316
  // C. Merge with a paragraph break for readability.
317
+ const needsGap = !/\n\n$/.test(existing) && !/^\n/.test(finalText ?? "");
318
+ messageToWriteTo.content = existing + (needsGap ? "\n\n" : "") + finalText;
 
 
319
  }
320
  } else {
321
  messageToWriteTo.content = finalText;