Spaces:
Runtime error
Runtime error
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}
|