fix: smaller bugs (#1311)

> Add version to the bottom of the chat page like on the other pages

In `version.tsx`, I just updated the if conditional to `"/chat/"`. This
will render the version on the new chat page (only `/chat`), but not on
the chat page (`/chat/:id`)

> Copy paste from ms word to archestra chat input doesn’t work due to
formatting issues

I couldn't reproduce this one, but I added sanitization to remove
problematic characters (zero-width and control characters)

> If you open a tool response in the chat UI that has alooooot of data,
it crashes the Chrome tab

This was crashing for a few reasons:
- The collapsible in the tool component was rendering its children even
when closed (unecessary)
- `code-block.tsx` was rendering >**_TWO_**< complete copies of the
syntax-highlighted code
- Simply rendering too many lines can end up breaking the page

So I implemented three optimizations:
- Lazy rendering in the collapsible
- Fix the `code-block.tsx` to render only once
- Truncated large outputs to 50 lines and add a 'show more' button

#1102

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Improves chat UI stability by lazy-rendering tool content,
consolidating code block theming, truncating large outputs with expand
control, sanitizing pasted text, and tweaking version display routing.
> 
> - **AI Elements**:
>   - **Tool**:
> - Add lazy rendering via context so `ToolContent` mounts children only
after first open.
> - Truncate large `output` to 50 lines with “Show more/less”; handle
string/object outputs.
>   - **Code Block**:
> - Use `next-themes` to select `oneDark`/`oneLight` and render a single
`SyntaxHighlighter` instance.
>   - **Prompt Input**:
> - Sanitize pasted text (strip zero-width/control chars) and handle
file pastes; prevent default paste when sanitizing.
> - **Version**:
> - Only hide version on routes starting with `/chat/` (still show on
`/chat`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
fefb107. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Ildar Iskhakov <[email protected]>
Co-authored-by: Joey Orlando <[email protected]>
Co-authored-by: Dominik Broj <[email protected]>

Author: 4 people

platform/frontend/src/components/ai-elements/code-block.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { CheckIcon, CopyIcon } from "lucide-react";
+import { useTheme } from "next-themes";
 import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -33,71 +34,53 @@ export const CodeBlock = ({
   className,
   children,
   ...props
-}: CodeBlockProps) => (
-  <CodeBlockContext.Provider value={{ code }}>
-    <div
-      className={cn(
-        "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      <div className="relative">
-        <SyntaxHighlighter
-          className="overflow-hidden dark:hidden"
-          codeTagProps={{
-            className: "font-mono text-sm",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "1rem",
-            fontSize: "0.875rem",
-            background: "hsl(var(--background))",
-            color: "hsl(var(--foreground))",
-          }}
-          language={language}
-          lineNumberStyle={{
-            color: "hsl(var(--muted-foreground))",
-            paddingRight: "1rem",
-            minWidth: "2.5rem",
-          }}
-          showLineNumbers={showLineNumbers}
-          style={oneLight}
-        >
-          {code}
-        </SyntaxHighlighter>
-        <SyntaxHighlighter
-          className="hidden overflow-hidden dark:block"
-          codeTagProps={{
-            className: "font-mono text-sm",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "1rem",
-            fontSize: "0.875rem",
-            background: "hsl(var(--background))",
-            color: "hsl(var(--foreground))",
-          }}
-          language={language}
-          lineNumberStyle={{
-            color: "hsl(var(--muted-foreground))",
-            paddingRight: "1rem",
-            minWidth: "2.5rem",
-          }}
-          showLineNumbers={showLineNumbers}
-          style={oneDark}
-        >
-          {code}
-        </SyntaxHighlighter>
-        {children && (
-          <div className="absolute top-2 right-2 flex items-center gap-2">
-            {children}
-          </div>
+}: CodeBlockProps) => {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <CodeBlockContext.Provider value={{ code }}>
+      <div
+        className={cn(
+          "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+          className,
         )}
+        {...props}
+      >
+        <div className="relative">
+          <SyntaxHighlighter
+            className="overflow-hidden"
+            codeTagProps={{
+              className: "font-mono text-sm",
+            }}
+            customStyle={{
+              margin: 0,
+              padding: "1rem",
+              fontSize: "0.875rem",
+              background: "hsl(var(--background))",
+              color: "hsl(var(--foreground))",
+            }}
+            language={language}
+            lineNumberStyle={{
+              color: "hsl(var(--muted-foreground))",
+              paddingRight: "1rem",
+              minWidth: "2.5rem",
+            }}
+            showLineNumbers={showLineNumbers}
+            style={isDark ? oneDark : oneLight}
+          >
+            {code}
+          </SyntaxHighlighter>
+          {children && (
+            <div className="absolute top-2 right-2 flex items-center gap-2">
+              {children}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  </CodeBlockContext.Provider>
-);
+    </CodeBlockContext.Provider>
+  );
+};
 
 export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
   onCopy?: () => void;

platform/frontend/src/components/ai-elements/prompt-input.tsx

@@ -529,17 +529,41 @@ export const PromptInputTextarea = ({
     }
 
     const files: File[] = [];
+    let hasText = false;
 
     for (const item of items) {
       if (item.kind === "file") {
         const file = item.getAsFile();
         if (file) {
           files.push(file);
         }
+      } else if (item.type === "text/plain") {
+        hasText = true;
       }
     }
 
-    if (files.length > 0) {
+    // Sanitize to remove problematic characters
+    if (hasText && files.length === 0) {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text/plain");
+
+      const sanitized = text
+        .replace(/[\u200B-\u200D\uFEFF]/g, "")
+        // biome-ignore lint/suspicious/noControlCharactersInRegex: Intentionally filtering control characters from pasted text to prevent ms word copy paste bug (issue #1102)
+        .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
+
+      const target = event.target as HTMLTextAreaElement;
+      const start = target.selectionStart;
+      const end = target.selectionEnd;
+      const current = target.value;
+
+      target.value =
+        current.substring(0, start) + sanitized + current.substring(end);
+      target.selectionStart = target.selectionEnd = start + sanitized.length;
+
+      const changeEvent = new Event("input", { bubbles: true });
+      target.dispatchEvent(changeEvent);
+    } else if (files.length > 0) {
       event.preventDefault();
       attachments.add(files);
     }

platform/frontend/src/components/ai-elements/tool.tsx

@@ -10,7 +10,9 @@ import {
   XCircleIcon,
 } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useState } from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
@@ -21,13 +23,36 @@ import { CodeBlock } from "./code-block";
 
 export type ToolProps = ComponentProps<typeof Collapsible>;
 
-export const Tool = ({ className, ...props }: ToolProps) => (
-  <Collapsible
-    defaultOpen={false}
-    className={cn("not-prose mb-4 w-full rounded-md border", className)}
-    {...props}
-  />
-);
+const ToolContext = createContext<{ hasOpened: boolean }>({ hasOpened: false });
+
+export const Tool = ({
+  className,
+  onOpenChange,
+  children,
+  ...props
+}: ToolProps) => {
+  const [hasOpened, setHasOpened] = useState(
+    props.defaultOpen || props.open || false,
+  );
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) setHasOpened(true);
+    onOpenChange?.(open);
+  };
+
+  return (
+    <ToolContext.Provider value={{ hasOpened }}>
+      <Collapsible
+        defaultOpen={false}
+        className={cn("not-prose mb-4 w-full rounded-md border", className)}
+        onOpenChange={handleOpenChange}
+        {...props}
+      >
+        {children}
+      </Collapsible>
+    </ToolContext.Provider>
+  );
+};
 
 export type ToolHeaderProps = {
   title?: string;
@@ -108,15 +133,25 @@ export const ToolHeader = ({
 
 export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
 
-export const ToolContent = ({ className, ...props }: ToolContentProps) => (
-  <CollapsibleContent
-    className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-      className,
-    )}
-    {...props}
-  />
-);
+export const ToolContent = ({
+  className,
+  children,
+  ...props
+}: ToolContentProps) => {
+  const { hasOpened } = useContext(ToolContext);
+
+  return (
+    <CollapsibleContent
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    >
+      {hasOpened ? children : null}
+    </CollapsibleContent>
+  );
+};
 
 export type ToolInputProps = ComponentProps<"div"> & {
   input: ToolUIPart["input"];
@@ -151,6 +186,8 @@ export const ToolOutput = ({
   conversations,
   ...props
 }: ToolOutputProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   if (!(output || errorText || conversations)) {
     return null;
   }
@@ -200,13 +237,50 @@ export const ToolOutput = ({
 
   let Output = <div>{output as ReactNode}</div>;
 
-  if (typeof output === "object") {
+  if (typeof output === "object" || typeof output === "string") {
+    const codeString =
+      typeof output === "object" ? JSON.stringify(output, null, 2) : output;
+    const lines = codeString.split("\n");
+    const MAX_LINES = 50;
+    const isLarge = lines.length > MAX_LINES;
+
+    const displayCode =
+      isExpanded || !isLarge
+        ? codeString
+        : `${lines.slice(0, MAX_LINES).join("\n")}\n... (${
+            lines.length - MAX_LINES
+          } more lines)`;
+
     Output = (
-      <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
+      <div className="relative group">
+        <CodeBlock code={displayCode} language="json" />
+        {isLarge && (
+          <div
+            className={cn(
+              "absolute bottom-4 left-0 right-0 flex justify-center transition-all duration-200",
+              !isExpanded &&
+                "pt-16 pb-2 bg-gradient-to-t from-background/80 to-transparent",
+            )}
+          >
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsExpanded(!isExpanded);
+              }}
+              className="h-7 text-xs shadow-sm bg-background/80 backdrop-blur-sm hover:bg-background border"
+            >
+              {isExpanded
+                ? "Show Less"
+                : `Show ${lines.length - MAX_LINES} more lines`}
+            </Button>
+          </div>
+        )}
+      </div>
     );
-  } else if (typeof output === "string") {
-    Output = <CodeBlock code={output} language="json" />;
   }
+
   return (
     <div className={cn("space-y-2 p-4", className)} {...props}>
       <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">

platform/frontend/src/components/version.tsx

@@ -7,7 +7,7 @@ export function Version() {
   const { data } = useHealth();
   const pathname = usePathname();
 
-  if (pathname.startsWith("/chat")) {
+  if (pathname.startsWith("/chat/")) {
     return null;
   }