From ee866081953eeeb15aeca43f897e0fa78729e7fb Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 22 Apr 2026 17:23:51 +0800
Subject: [PATCH] fix(stage-ui): overflow chat bubble

---
 .../scenarios/chat/components/error-item.vue  |  4 +++-
 .../chat/components/history.story.vue         | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/stage-ui/src/components/scenarios/chat/components/error-item.vue b/packages/stage-ui/src/components/scenarios/chat/components/error-item.vue
index c4609244b..07f7707a0 100644
--- a/packages/stage-ui/src/components/scenarios/chat/components/error-item.vue
+++ b/packages/stage-ui/src/components/scenarios/chat/components/error-item.vue
@@ -24,6 +24,8 @@ const emit = defineEmits<{
 }>()
 
 const boxClasses = computed(() => [
+  'min-w-0',
+  'max-w-full',
   props.variant === 'mobile' ? 'px-2 py-2 text-sm' : 'px-3 py-3',
 ])
 const copyText = computed(() => getChatHistoryItemCopyText(props.message as ChatHistoryItem))
@@ -58,7 +60,7 @@ const copyText = computed(() => getChatHistoryItemCopyText(props.message as Chat
           <MarkdownRenderer
             v-else
             :content="message.content"
-            class="break-words text-violet-500 dark:text-violet-300"
+            class="whitespace-pre-wrap break-all text-violet-500 dark:text-violet-300"
           />
         </div>
       </template>
diff --git a/packages/stage-ui/src/components/scenarios/chat/components/history.story.vue b/packages/stage-ui/src/components/scenarios/chat/components/history.story.vue
index 312876c05..85c6ced7a 100644
--- a/packages/stage-ui/src/components/scenarios/chat/components/history.story.vue
+++ b/packages/stage-ui/src/components/scenarios/chat/components/history.story.vue
@@ -104,6 +104,17 @@ const errorMessages = ref<ChatHistoryItem[]>([
   },
 ])
 
+const errorOverflowMessages = ref<ChatHistoryItem[]>([
+  {
+    role: 'user',
+    content: 'Retry the provider call and tell me exactly what failed.',
+  },
+  {
+    role: 'error',
+    content: 'Remote sent 400 response: {"error":{"message":"This model is not available in your region.","type":"invalid_request_error","param":"model","code":"region_not_supported"},"request_id":"req_01K8F0R7X1W2Y3Z4A5B6C7D8E9","endpoint":"https://api.example.invalid/v1/chat/completions","provider":"openai-compatible"}',
+  },
+])
+
 const streamingMessage = ref<ChatAssistantMessage>({
   role: 'assistant',
   content: '',
@@ -196,6 +207,18 @@ const streamingMessage = ref<ChatAssistantMessage>({
       </div>
     </Variant>
 
+    <Variant
+      id="error-overflow"
+      title="Error (Overflow)"
+    >
+      <div :class="['font-cute', 'w-72', 'max-w-full']">
+        <ChatHistory
+          :messages="errorOverflowMessages"
+          variant="mobile"
+        />
+      </div>
+    </Variant>
+
     <Variant
       id="scroll-visualizer"
       title="Scroll Visualizer"