From 217c59a13a40f15f7574c0e3d264e1c1e95d3dab Mon Sep 17 00:00:00 2001
From: dwelle <5153846+dwelle@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:14:08 +0100
Subject: [PATCH] feat(editor): highlight TTD assistant responses

---
 .../components/TTDDialog/Chat/Chat.scss       | 71 ++++++++++++++++-
 .../components/TTDDialog/Chat/ChatMessage.tsx | 63 ++++++++++++---
 .../TTDDialog/Chat/TTDChatPanel.tsx           |  4 +-
 .../components/TTDDialog/Chat/useChatAgent.ts |  1 +
 .../components/TTDDialog/TextToDiagram.tsx    |  6 +-
 .../TTDDialog/hooks/useTextGeneration.ts      |  1 +
 .../TTDDialog/mermaid-highlighting.test.ts    | 40 ++++++++++
 .../TTDDialog/mermaid-highlighting.ts         | 79 +++++++++++++++++++
 .../components/TTDDialog/mermaid-lang-lite.ts | 76 ++----------------
 .../excalidraw/components/TTDDialog/types.ts  |  3 +
 .../components/TTDDialog/useTTDChatStorage.ts | 13 ++-
 .../components/TTDDialog/utils/chat.test.ts   | 24 ++++++
 12 files changed, 296 insertions(+), 85 deletions(-)
 create mode 100644 packages/excalidraw/components/TTDDialog/mermaid-highlighting.test.ts
 create mode 100644 packages/excalidraw/components/TTDDialog/mermaid-highlighting.ts

diff --git a/packages/excalidraw/components/TTDDialog/Chat/Chat.scss b/packages/excalidraw/components/TTDDialog/Chat/Chat.scss
index d205d19a5a..fbb710cb6e 100644
--- a/packages/excalidraw/components/TTDDialog/Chat/Chat.scss
+++ b/packages/excalidraw/components/TTDDialog/Chat/Chat.scss
@@ -3,7 +3,25 @@
 $verticalBreakpoint: 861px;
 
 .excalidraw {
+  --ttd-mermaid-token-keyword: #0000ff;
+  --ttd-mermaid-token-string: #a31515;
+  --ttd-mermaid-token-comment: #008000;
+  --ttd-mermaid-token-number: #098658;
+  --ttd-mermaid-token-operator: #1e1e1e;
+  --ttd-mermaid-token-punctuation: #1e1e1e;
+  --ttd-mermaid-token-variable-name: #001080;
+  --ttd-mermaid-token-bracket: #af00db;
+
   &.theme--dark {
+    --ttd-mermaid-token-keyword: #569cd6;
+    --ttd-mermaid-token-string: #ce9178;
+    --ttd-mermaid-token-comment: #6a9955;
+    --ttd-mermaid-token-number: #b5cea8;
+    --ttd-mermaid-token-operator: #d4d4d4;
+    --ttd-mermaid-token-punctuation: #d4d4d4;
+    --ttd-mermaid-token-variable-name: #9cdcfe;
+    --ttd-mermaid-token-bracket: #ffd700;
+
     .chat-message {
       &--assistant {
         .chat-message__content {
@@ -194,7 +212,7 @@ $verticalBreakpoint: 861px;
       align-items: flex-start;
 
       .chat-message__content {
-        background: var(--color-surface-low);
+        background: #f7f7f7;
         color: var(--color-on-surface);
         border-radius: var(--border-radius-md);
         min-width: 6rem;
@@ -292,6 +310,51 @@ $verticalBreakpoint: 861px;
       word-wrap: break-word;
     }
 
+    &__text--error {
+      color: inherit;
+    }
+
+    &__text--mermaid {
+      overflow-x: auto;
+      font-weight: 400;
+    }
+
+    &__token {
+      white-space: inherit;
+    }
+
+    &__token--keyword {
+      color: var(--ttd-mermaid-token-keyword);
+    }
+
+    &__token--string {
+      color: var(--ttd-mermaid-token-string);
+    }
+
+    &__token--comment {
+      color: var(--ttd-mermaid-token-comment);
+    }
+
+    &__token--number {
+      color: var(--ttd-mermaid-token-number);
+    }
+
+    &__token--operator {
+      color: var(--ttd-mermaid-token-operator);
+    }
+
+    &__token--punctuation {
+      color: var(--ttd-mermaid-token-punctuation);
+    }
+
+    &__token--variableName {
+      color: var(--ttd-mermaid-token-variable-name);
+    }
+
+    &__token--bracket {
+      color: var(--ttd-mermaid-token-bracket);
+    }
+
     &__cursor {
       display: inline-block;
       margin-left: 2px;
@@ -332,11 +395,13 @@ $verticalBreakpoint: 861px;
     &__error {
       color: var(--color-danger);
       font-weight: 500;
-      white-space: pre-wrap;
-      word-wrap: break-word;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
+
+      .chat-message__text--mermaid {
+        color: var(--color-on-surface);
+      }
     }
 
     &__error_message {
diff --git a/packages/excalidraw/components/TTDDialog/Chat/ChatMessage.tsx b/packages/excalidraw/components/TTDDialog/Chat/ChatMessage.tsx
index ad2cf574b0..762b4ee075 100644
--- a/packages/excalidraw/components/TTDDialog/Chat/ChatMessage.tsx
+++ b/packages/excalidraw/components/TTDDialog/Chat/ChatMessage.tsx
@@ -5,8 +5,49 @@ import { t } from "../../../i18n";
 import { FilledButton } from "../../FilledButton";
 import { TrashIcon, codeIcon, stackPushIcon, RetryIcon } from "../../icons";
 
+import { tokenizeMermaid } from "../mermaid-highlighting";
+
 import type { TChat, TTTDDialog } from "../types";
 
+const isMermaidMessage = (message: TChat.ChatMessage) =>
+  message.contentFormat === "mermaid";
+
+const renderMessageContent = (
+  message: TChat.ChatMessage,
+  className: string,
+) => {
+  const content = message.content ?? "";
+
+  console.log("@", message);
+
+  if (!isMermaidMessage(message)) {
+    return (
+      <div className={className}>
+        {content}
+        {message.isGenerating && (
+          <span className="chat-message__cursor">▋</span>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx(className, "chat-message__text--mermaid")}>
+      {tokenizeMermaid(content).map((token, index) => (
+        <span
+          key={`${index}-${token.type ?? "text"}-${token.value}`}
+          className={clsx("chat-message__token", {
+            [`chat-message__token--${token.type}`]: token.type,
+          })}
+        >
+          {token.value}
+        </span>
+      ))}
+      {message.isGenerating && <span className="chat-message__cursor">▋</span>}
+    </div>
+  );
+};
+
 export const ChatMessage: React.FC<{
   message: TChat.ChatMessage;
   onMermaidTabClick?: (message: TChat.ChatMessage) => void;
@@ -122,7 +163,14 @@ export const ChatMessage: React.FC<{
         <div className="chat-message__body">
           {message.error ? (
             <>
-              <div className="chat-message__error">{message.content}</div>
+              <div className="chat-message__error">
+                {renderMessageContent(
+                  message,
+                  clsx("chat-message__text", {
+                    "chat-message__text--error": !isMermaidMessage(message),
+                  }),
+                )}
+              </div>
               {message.errorType !== "parse" && (
                 <div className="chat-message__error_message">
                   Error: {message.error || t("chat.errors.generationFailed")}
@@ -132,7 +180,7 @@ export const ChatMessage: React.FC<{
                 <div className="chat-message__error_message">
                   <p>{t("chat.errors.invalidDiagram")}</p>
                   <div className="chat-message__error-actions">
-                    {onMermaidTabClick && (
+                    {onMermaidTabClick && isMermaidMessage(message) && (
                       <button
                         className="chat-message__error-link"
                         onClick={() => onMermaidTabClick(message)}
@@ -156,18 +204,13 @@ export const ChatMessage: React.FC<{
               )}
             </>
           ) : (
-            <div className="chat-message__text">
-              {message.content}
-              {message.isGenerating && (
-                <span className="chat-message__cursor">▋</span>
-              )}
-            </div>
+            renderMessageContent(message, "chat-message__text")
           )}
         </div>
       </div>
       {message.type === "assistant" && !message.isGenerating && (
         <div className="chat-message__actions">
-          {!message.error && onInsertMessage && (
+          {!message.error && onInsertMessage && isMermaidMessage(message) && (
             <button
               className="chat-message__action"
               onClick={() => onInsertMessage(message)}
@@ -178,7 +221,7 @@ export const ChatMessage: React.FC<{
               {stackPushIcon}
             </button>
           )}
-          {onMermaidTabClick && message.content && (
+          {onMermaidTabClick && isMermaidMessage(message) && message.content && (
             <button
               className="chat-message__action"
               onClick={() => onMermaidTabClick(message)}
diff --git a/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx b/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx
index 3c9d8c608e..f1764f5fd1 100644
--- a/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx
+++ b/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx
@@ -25,6 +25,7 @@ export const TTDChatPanel = ({
   onGenerate,
   isGenerating,
   generatedResponse,
+  generatedResponseFormat,
   isMenuOpen,
   onMenuToggle,
   onMenuClose,
@@ -50,6 +51,7 @@ export const TTDChatPanel = ({
   onGenerate: TTTDDialog.OnGenerate;
   isGenerating: boolean;
   generatedResponse: string | null | undefined;
+  generatedResponseFormat?: TChat.ChatMessage["contentFormat"];
 
   isMenuOpen: boolean;
   onMenuToggle: () => void;
@@ -89,7 +91,7 @@ export const TTDChatPanel = ({
       });
     }
 
-    if (generatedResponse) {
+    if (generatedResponse && generatedResponseFormat === "mermaid") {
       actions.push({
         action: onViewAsMermaid,
         label: t("chat.viewAsMermaid"),
diff --git a/packages/excalidraw/components/TTDDialog/Chat/useChatAgent.ts b/packages/excalidraw/components/TTDDialog/Chat/useChatAgent.ts
index 607b749e16..4aefec36ca 100644
--- a/packages/excalidraw/components/TTDDialog/Chat/useChatAgent.ts
+++ b/packages/excalidraw/components/TTDDialog/Chat/useChatAgent.ts
@@ -25,6 +25,7 @@ export const useChatAgent = () => {
         {
           type: "assistant",
           content: "",
+          contentFormat: "mermaid",
           isGenerating: true,
         },
       ]),
diff --git a/packages/excalidraw/components/TTDDialog/TextToDiagram.tsx b/packages/excalidraw/components/TTDDialog/TextToDiagram.tsx
index da547602aa..95d507f337 100644
--- a/packages/excalidraw/components/TTDDialog/TextToDiagram.tsx
+++ b/packages/excalidraw/components/TTDDialog/TextToDiagram.tsx
@@ -80,7 +80,10 @@ const TextToDiagramContent = ({
   } = useChatManagement({ persistenceAdapter });
 
   const onViewAsMermaid = () => {
-    if (typeof lastAssistantMessage?.content === "string") {
+    if (
+      lastAssistantMessage?.contentFormat === "mermaid" &&
+      typeof lastAssistantMessage.content === "string"
+    ) {
       saveMermaidDataToStorage(lastAssistantMessage.content);
       setAppState({
         openDialog: { name: "ttd", tab: "mermaid" },
@@ -206,6 +209,7 @@ const TextToDiagramContent = ({
         onGenerate={onGenerate}
         isGenerating={lastAssistantMessage?.isGenerating ?? false}
         generatedResponse={lastAssistantMessage?.content}
+        generatedResponseFormat={lastAssistantMessage?.contentFormat}
         isMenuOpen={isMenuOpen}
         onMenuToggle={handleMenuToggle}
         onMenuClose={handleMenuClose}
diff --git a/packages/excalidraw/components/TTDDialog/hooks/useTextGeneration.ts b/packages/excalidraw/components/TTDDialog/hooks/useTextGeneration.ts
index e31847ae0c..c7392eb216 100644
--- a/packages/excalidraw/components/TTDDialog/hooks/useTextGeneration.ts
+++ b/packages/excalidraw/components/TTDDialog/hooks/useTextGeneration.ts
@@ -88,6 +88,7 @@ export const useTextGeneration = ({
         updateAssistantContent(prev, {
           isGenerating: true,
           content: "",
+          contentFormat: "mermaid",
           error: undefined,
           errorType: undefined,
           errorDetails: undefined,
diff --git a/packages/excalidraw/components/TTDDialog/mermaid-highlighting.test.ts b/packages/excalidraw/components/TTDDialog/mermaid-highlighting.test.ts
new file mode 100644
index 0000000000..296f04813a
--- /dev/null
+++ b/packages/excalidraw/components/TTDDialog/mermaid-highlighting.test.ts
@@ -0,0 +1,40 @@
+import {
+  getMermaidHighlightToken,
+  tokenizeMermaid,
+} from "./mermaid-highlighting";
+
+describe("mermaid highlighting", () => {
+  it("tokenizes mermaid syntax with shared token types", () => {
+    const tokens = tokenizeMermaid('flowchart LR\nA["Hello"] --> B');
+
+    expect(tokens).toEqual([
+      { type: "keyword", value: "flowchart" },
+      { type: null, value: " " },
+      { type: "keyword", value: "LR" },
+      { type: null, value: "\n" },
+      { type: "variableName", value: "A" },
+      { type: "bracket", value: "[" },
+      { type: "string", value: '"Hello"' },
+      { type: "bracket", value: "]" },
+      { type: null, value: " " },
+      { type: "operator", value: "-->" },
+      { type: null, value: " " },
+      { type: "variableName", value: "B" },
+    ]);
+  });
+
+  it("limits comment tokens to a single line", () => {
+    const tokens = tokenizeMermaid("%% comment\nflowchart TD");
+
+    expect(tokens[0]).toEqual({ type: "comment", value: "%% comment" });
+    expect(tokens[1]).toEqual({ type: null, value: "\n" });
+    expect(tokens[2]).toEqual({ type: "keyword", value: "flowchart" });
+  });
+
+  it("falls back to plain text for unsupported characters", () => {
+    expect(getMermaidHighlightToken("@node")).toEqual({
+      type: null,
+      value: "@",
+    });
+  });
+});
diff --git a/packages/excalidraw/components/TTDDialog/mermaid-highlighting.ts b/packages/excalidraw/components/TTDDialog/mermaid-highlighting.ts
new file mode 100644
index 0000000000..3dd7908302
--- /dev/null
+++ b/packages/excalidraw/components/TTDDialog/mermaid-highlighting.ts
@@ -0,0 +1,79 @@
+export type MermaidHighlightTokenType =
+  | "bracket"
+  | "comment"
+  | "keyword"
+  | "number"
+  | "operator"
+  | "punctuation"
+  | "string"
+  | "variableName";
+
+export type MermaidHighlightToken = {
+  type: MermaidHighlightTokenType | null;
+  value: string;
+};
+
+const DIAGRAM_TYPE_PATTERN =
+  /^(flowchart|graph|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie|mindmap|journey|gitGraph|timeline|quadrantChart|sankey|xychart)\b/i;
+const DIRECTION_PATTERN = /^(TB|TD|BT|RL|LR)\b/;
+const KEYWORD_PATTERN =
+  /^(subgraph|end|participant|actor|loop|alt|else|opt|par|critical|break|rect|note|over|activate|deactivate|title|section|class|style|linkStyle|classDef|click)\b/i;
+
+const MERMAID_TOKEN_RULES: ReadonlyArray<{
+  pattern: RegExp;
+  type: MermaidHighlightTokenType | null;
+}> = [
+  { pattern: /^%%[^\n]*/, type: "comment" },
+  { pattern: /^"(?:[^"\\]|\\.)*"/, type: "string" },
+  { pattern: DIAGRAM_TYPE_PATTERN, type: "keyword" },
+  { pattern: DIRECTION_PATTERN, type: "keyword" },
+  { pattern: KEYWORD_PATTERN, type: "keyword" },
+  { pattern: /^[-.=<>|ox]+>/, type: "operator" },
+  { pattern: /^<[-.=<>|ox]+/, type: "operator" },
+  { pattern: /^(--+|\.\.+|==+)/, type: "operator" },
+  { pattern: /^[[\](){}|<>]/, type: "bracket" },
+  { pattern: /^[A-Za-z_][A-Za-z0-9_]*/, type: "variableName" },
+  { pattern: /^\d+(\.\d+)?/, type: "number" },
+  { pattern: /^[,:;]/, type: "punctuation" },
+  { pattern: /^\s+/, type: null },
+];
+
+export const getMermaidHighlightToken = (
+  input: string,
+): MermaidHighlightToken | null => {
+  if (!input) {
+    return null;
+  }
+
+  for (const rule of MERMAID_TOKEN_RULES) {
+    const match = input.match(rule.pattern);
+    if (match) {
+      return {
+        type: rule.type,
+        value: match[0],
+      };
+    }
+  }
+
+  return {
+    type: null,
+    value: input[0],
+  };
+};
+
+export const tokenizeMermaid = (input: string): MermaidHighlightToken[] => {
+  const tokens: MermaidHighlightToken[] = [];
+  let remaining = input;
+
+  while (remaining) {
+    const token = getMermaidHighlightToken(remaining);
+    if (!token) {
+      break;
+    }
+
+    tokens.push(token);
+    remaining = remaining.slice(token.value.length);
+  }
+
+  return tokens;
+};
diff --git a/packages/excalidraw/components/TTDDialog/mermaid-lang-lite.ts b/packages/excalidraw/components/TTDDialog/mermaid-lang-lite.ts
index 42d5ceb00e..039d691fe8 100644
--- a/packages/excalidraw/components/TTDDialog/mermaid-lang-lite.ts
+++ b/packages/excalidraw/components/TTDDialog/mermaid-lang-lite.ts
@@ -1,79 +1,17 @@
 import { StreamLanguage } from "@codemirror/language";
 
+import { getMermaidHighlightToken } from "./mermaid-highlighting";
+
 const mermaidStreamParser = StreamLanguage.define({
   token(stream) {
-    // Comments: %%...
-    if (stream.match(/^%%.*$/)) {
-      return "comment";
-    }
-
-    // Strings
-    if (stream.match(/^"(?:[^"\\]|\\.)*"/)) {
-      return "string";
-    }
-
-    // Diagram type keywords (at start of line or after whitespace)
-    if (
-      stream.match(
-        /^(flowchart|graph|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie|mindmap|journey|gitGraph|timeline|quadrantChart|sankey|xychart)\b/i,
-      )
-    ) {
-      return "keyword";
-    }
-
-    // Direction keywords
-    if (stream.match(/^(TB|TD|BT|RL|LR)\b/)) {
-      return "keyword";
-    }
-
-    // Keywords
-    if (
-      stream.match(
-        /^(subgraph|end|participant|actor|loop|alt|else|opt|par|critical|break|rect|note|over|activate|deactivate|title|section|class|style|linkStyle|classDef|click)\b/i,
-      )
-    ) {
-      return "keyword";
-    }
-
-    // Arrows: -->, ---, -.->, ===>, etc.
-    if (stream.match(/^[-.=<>|ox]+>/)) {
-      return "operator";
-    }
-    if (stream.match(/^<[-.=<>|ox]+/)) {
-      return "operator";
-    }
-    if (stream.match(/^--+|\.\.+|==+/)) {
-      return "operator";
-    }
-
-    // Labels in brackets/parens: [text], (text), {text}, ((text)), etc.
-    if (stream.match(/^[[\](){}|<>]/)) {
-      return "bracket";
-    }
-
-    // Node IDs (alphanumeric)
-    if (stream.match(/^[A-Za-z_][A-Za-z0-9_]*/)) {
-      return "variableName";
-    }
-
-    // Numbers
-    if (stream.match(/^\d+(\.\d+)?/)) {
-      return "number";
-    }
-
-    // Punctuation
-    if (stream.match(/^[,:;]/)) {
-      return "punctuation";
-    }
-
-    // Skip whitespace
-    if (stream.eatSpace()) {
+    const token = getMermaidHighlightToken(stream.string.slice(stream.pos));
+    if (!token) {
+      stream.skipToEnd();
       return null;
     }
 
-    // Skip any other character
-    stream.next();
-    return null;
+    stream.pos += token.value.length;
+    return token.type;
   },
 });
 
diff --git a/packages/excalidraw/components/TTDDialog/types.ts b/packages/excalidraw/components/TTDDialog/types.ts
index 7f79894b92..e0a0d0a4b0 100644
--- a/packages/excalidraw/components/TTDDialog/types.ts
+++ b/packages/excalidraw/components/TTDDialog/types.ts
@@ -18,6 +18,8 @@ export type MermaidData = {
   files: BinaryFiles | null;
 };
 
+export type ChatMessageContentFormat = "text" | "mermaid";
+
 export interface RateLimits {
   rateLimit: number;
   rateLimitRemaining: number;
@@ -33,6 +35,7 @@ export namespace TChat {
     errorType?: "parse" | "network" | "other";
     lastAttemptAt?: number;
     type: "user" | "assistant" | "warning";
+    contentFormat?: ChatMessageContentFormat;
     warningType?: /* daily rate limit */
     "messageLimitExceeded" | /* general 429 */ "rateLimitExceeded";
     content?: string;
diff --git a/packages/excalidraw/components/TTDDialog/useTTDChatStorage.ts b/packages/excalidraw/components/TTDDialog/useTTDChatStorage.ts
index ce55b120a2..deca89e643 100644
--- a/packages/excalidraw/components/TTDDialog/useTTDChatStorage.ts
+++ b/packages/excalidraw/components/TTDDialog/useTTDChatStorage.ts
@@ -7,6 +7,17 @@ import { chatHistoryAtom } from "./TTDContext";
 
 import type { SavedChat, SavedChats, TTDPersistenceAdapter } from "./types";
 
+const normalizePersistedChat = (chat: SavedChat): SavedChat => ({
+  ...chat,
+  messages: chat.messages.map((message) => ({
+    ...message,
+    // Legacy TTD chats predate explicit content format metadata.
+    contentFormat:
+      message.contentFormat ??
+      (message.type === "assistant" ? "mermaid" : undefined),
+  })),
+});
+
 interface UseTTDChatStorageProps {
   persistenceAdapter: TTDPersistenceAdapter;
 }
@@ -56,7 +67,7 @@ export const useTTDChatStorage = ({
     setIsLoading(true);
     try {
       const chats = await persistenceAdapter.loadChats();
-      setSavedChats(chats);
+      setSavedChats(chats.map(normalizePersistedChat));
       setChatsLoaded(true);
     } catch (error) {
       console.warn("Failed to load chats:", error);
diff --git a/packages/excalidraw/components/TTDDialog/utils/chat.test.ts b/packages/excalidraw/components/TTDDialog/utils/chat.test.ts
index 3d0231c6a8..8b5f3037a5 100644
--- a/packages/excalidraw/components/TTDDialog/utils/chat.test.ts
+++ b/packages/excalidraw/components/TTDDialog/utils/chat.test.ts
@@ -117,6 +117,28 @@ describe("chat utils", () => {
       expect(result.messages[0].errorType).toBe("network");
     });
 
+    it("should update content format when provided", () => {
+      const chatHistory: TChat.ChatHistory = {
+        id: "chat-1",
+        currentPrompt: "",
+        messages: [
+          {
+            id: "1",
+            type: "assistant",
+            content: "graph TD",
+            timestamp: new Date("2024-01-01"),
+            contentFormat: "text",
+          },
+        ],
+      };
+
+      const result = updateAssistantContent(chatHistory, {
+        contentFormat: "mermaid",
+      });
+
+      expect(result.messages[0].contentFormat).toBe("mermaid");
+    });
+
     it("should return unchanged chatHistory if no assistant message exists", () => {
       const chatHistory: TChat.ChatHistory = {
         id: "chat-1",
@@ -357,6 +379,7 @@ describe("chat utils", () => {
         {
           type: "assistant",
           content: "Message",
+          contentFormat: "mermaid",
           isGenerating: true,
           error: "Error text",
           errorType: "parse",
@@ -364,6 +387,7 @@ describe("chat utils", () => {
       ]);
 
       expect(result.messages[0].isGenerating).toBe(true);
+      expect(result.messages[0].contentFormat).toBe("mermaid");
       expect(result.messages[0].error).toBe("Error text");
       expect(result.messages[0].errorType).toBe("parse");
     });