Skip to content

fix(chat): wrap long unbroken strings inside chat bubble (#457) #535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dolho wants to merge 1 commit into from
Closed

fix(chat): wrap long unbroken strings inside chat bubble (#457) #535

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/frontend/src/components/chat/ChatBubble.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
<!-- User message (plain text) -->
<div
v-if="role === 'user'"
class="max-w-[85%] ml-auto"
class="max-w-[85%] min-w-0 ml-auto"
>
<div class="rounded-xl px-4 py-3 bg-indigo-600 text-white">
<div class="rounded-xl px-4 py-3 bg-indigo-600 text-white min-w-0">
<div v-if="source === 'voice'" class="flex items-center gap-1.5 mb-1 opacity-75">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 15a3 3 0 003-3V5a3 3 0 00-6 0v7a3 3 0 003 3z" /></svg>
<span class="text-[10px] uppercase tracking-wide">Voice</span>
</div>
<p class="whitespace-pre-wrap">{{ content }}</p>
<p class="whitespace-pre-wrap [overflow-wrap:anywhere]">{{ content }}</p>
</div>
<p v-if="formattedTime" class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-right">{{ formattedTime }}</p>
</div>
<!-- Self-task result message (SELF-EXEC-001) - collapsible by default -->
<div
v-else-if="source === 'self_task'"
class="max-w-[85%] group relative"
class="max-w-[85%] min-w-0 group relative"
>
<button
type="button"
Expand Down Expand Up @@ -55,7 +55,7 @@
<!-- Expanded content -->
<div
v-else
class="prose prose-sm dark:prose-invert max-w-none prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none"
class="prose prose-sm dark:prose-invert max-w-none [overflow-wrap:anywhere] prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:whitespace-pre prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-code:break-all prose-a:break-all"
v-html="renderedContent"
></div>
</div>
Expand All @@ -64,7 +64,7 @@
<!-- Assistant message (markdown rendered) -->
<div
v-else
class="max-w-[85%] group relative"
class="max-w-[85%] min-w-0 group relative"
>
<button
type="button"
Expand All @@ -76,13 +76,13 @@
<svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
<svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
</button>
<div class="rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm">
<div class="rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm min-w-0">
<div v-if="source === 'voice'" class="flex items-center gap-1.5 mb-1 text-gray-400 dark:text-gray-500">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg>
<span class="text-[10px] uppercase tracking-wide">Voice</span>
</div>
<div
class="prose prose-sm dark:prose-invert max-w-none prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none"
class="prose prose-sm dark:prose-invert max-w-none [overflow-wrap:anywhere] prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:whitespace-pre prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-code:break-all prose-a:break-all"
v-html="renderedContent"
></div>
</div>
Expand Down