Andrew commited on
Commit
90b6a14
·
1 Parent(s): 5510827

Add color-coded persona bubble icon to chat message headers

Browse files
src/lib/components/chat/ChatMessage.svelte CHANGED
@@ -13,7 +13,9 @@
13
  import CarbonMaximize from "~icons/carbon/maximize";
14
  import CarbonMinimize from "~icons/carbon/minimize";
15
  import CarbonPen from "~icons/carbon/pen";
 
16
  import UploadedFile from "./UploadedFile.svelte";
 
17
 
18
  import {
19
  MessageUpdateType,
@@ -413,20 +415,22 @@ let hasClientThink = $derived(!hasServerReasoning && hasThinkSegments(message.co
413
  style={hasMultipleCards && !focusedPersonaId ? `min-width: 320px; max-width: ${isExpanded ? '600px' : '420px'};` : ''}
414
  data-persona-id={response.personaId}
415
  >
416
- <!-- Persona Header: persona name + action buttons -->
417
  <div class="mb-3 flex items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700">
418
  {#if isPersonaMode}
419
  <button
420
  type="button"
421
- class="truncate text-left text-lg font-semibold text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-50 transition-colors"
422
  onclick={() => openPersonaSettings(response.personaId)}
423
  aria-label="Open settings for {displayName}"
424
  title="View {displayName} settings"
425
  >
 
426
  {displayName}
427
  </button>
428
  {:else}
429
- <h3 class="truncate text-lg font-semibold text-gray-700 dark:text-gray-200">
 
430
  {displayName}
431
  </h3>
432
  {/if}
 
13
  import CarbonMaximize from "~icons/carbon/maximize";
14
  import CarbonMinimize from "~icons/carbon/minimize";
15
  import CarbonPen from "~icons/carbon/pen";
16
+ import CarbonChat from "~icons/carbon/chat";
17
  import UploadedFile from "./UploadedFile.svelte";
18
+ import { getPersonaColor } from "$lib/utils/personaColors";
19
 
20
  import {
21
  MessageUpdateType,
 
415
  style={hasMultipleCards && !focusedPersonaId ? `min-width: 320px; max-width: ${isExpanded ? '600px' : '420px'};` : ''}
416
  data-persona-id={response.personaId}
417
  >
418
+ <!-- Persona Header: color bubble + persona name + action buttons -->
419
  <div class="mb-3 flex items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700">
420
  {#if isPersonaMode}
421
  <button
422
  type="button"
423
+ class="flex items-center gap-1.5 truncate text-left text-lg font-semibold text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-50 transition-colors"
424
  onclick={() => openPersonaSettings(response.personaId)}
425
  aria-label="Open settings for {displayName}"
426
  title="View {displayName} settings"
427
  >
428
+ <CarbonChat class="flex-shrink-0 text-base" style="color: {getPersonaColor(response.personaId)}" />
429
  {displayName}
430
  </button>
431
  {:else}
432
+ <h3 class="flex items-center gap-1.5 truncate text-lg font-semibold text-gray-700 dark:text-gray-200">
433
+ <CarbonChat class="flex-shrink-0 text-base" style="color: {getPersonaColor(response.personaId)}" />
434
  {displayName}
435
  </h3>
436
  {/if}