fix(ui): stop breaking words mid-word in chat messages (#2351)

### Summary

Chat message bodies are rendered with `break-all`, which lets a line
break
inside a word even when the whole word would have fit on the next line.
Ordinary prose comes out chopped — `ModelConfig` renders as `M /
odelConfig`,
`propagates` as `propaga / tes`.

`overflow-wrap: anywhere` keeps the behaviour `break-all` was added for
(long
tool-call ids and URLs still wrap instead of overflowing the column) but
only
breaks a word that genuinely cannot fit on a line of its own.

The difference is invisible in CJK text, where a line break is permitted
between almost any two characters — which is likely why it went
unnoticed.

### Before / after

Rendered from the `MessageWithUnbreakableTokens` story added in this PR,
at a
560px-wide column.

| | |
|---|---|
| **Before** (`break-all`) | `propaga` / `tes`, `componen` /
`ts/chat/...` |
| **After** (`overflow-wrap: anywhere`) | words intact; the URL breaks
after `github.com/kagent-`, the tool-call id still wraps |

<img width="560" height="340" alt="wb-before"
src="https://github.com/user-attachments/assets/890102ed-4a43-4734-98ff-b413a3d89a24"
/>

<img width="560" height="340" alt="wb-after"
src="https://github.com/user-attachments/assets/9125fbb8-dcf5-441b-bf3e-b13503d478b7"
/>

### Test plan

- [x] `npm run lint`
- [x] `npm run test` — 344 passed
- [x] `npm run test:vitest` — 34 files / 141 tests passed
- [x] New story `Chat/ChatMessage/MessageWithUnbreakableTokens` renders
prose
      next to a long tool-call id and a long URL, so Chromatic catches a
      regression here.

### Notes for reviewers

- Chromatic will report a visual diff on this story only. It is a new
story, so
  there is no prior baseline to compare against.
- This does not address the separate problem where one over-wide element
in the
  transcript widens the whole conversation column (see #2032). That is a
  container-level issue and I will open it separately.

Signed-off-by: Golden Garlic <148346166+garlicKim21@users.noreply.github.com>
Co-authored-by: Peter Jausovec <peterj@users.noreply.github.com>

Author: garlicKim21

ui/src/components/chat/ChatMessage.stories.tsx

@@ -207,6 +207,30 @@ export const AgentMessageWithTable: Story = {
   },
 };
 
+/**
+ * Prose alongside content that offers no break opportunities — a tool-call id
+ * carrying a Gemini thought signature, and a long URL. The prose has to keep
+ * its word boundaries while the two long tokens wrap.
+ */
+export const MessageWithUnbreakableTokens: Story = {
+  args: {
+    message: createMessage({
+      role: "agent",
+      parts: [
+        {
+          kind: "text",
+          text: `The kagent controller reconciles ModelConfig resources and propagates configuration to the agent deployment automatically.
+
+Tool call id: \`call_9f2a__thought__QmFzZTY0RW5jb2RlZFRob3VnaHRTaWduYXR1cmVCbG9iQmFzZTY0RW5jb2RlZFRob3VnaHRTaWduYXR1cmU\`
+
+See https://github.com/kagent-dev/kagent/blob/main/ui/src/components/chat/ChatMessage.tsx for the renderer.`,
+        },
+      ],
+    }),
+    allMessages: [],
+  },
+};
+
 export const MessageWithMultipleParts: Story = {
   args: {
     message: createMessage({

ui/src/components/chat/ChatMessage.tsx

@@ -175,7 +175,13 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
         <KagentLogo className="w-4 h-4" />
         <div className="text-xs font-bold">{displayName}</div>
       </div> : <div className="text-xs font-bold">{displayName}</div>}
-      <TruncatableText content={String(content)} className="break-all text-primary-foreground" />
+      {/*
+        `break-all` breaks a line inside a word even when the word would have
+        fit on the next line ("ModelConfig" renders as "M / odelConfig").
+        `overflow-wrap: anywhere` only breaks a word that cannot fit on a line
+        of its own, which is what long tool-call ids and URLs need.
+      */}
+      <TruncatableText content={String(content)} className="[overflow-wrap:anywhere] text-primary-foreground" />
       {source !== "user" && (
         <div className="flex mt-2 justify-end items-center gap-2">
           {tokenStats && <TokenStatsTooltip stats={tokenStats} />}