From d2d9398093b3bd696226ab7e1f9367530b3553b6 Mon Sep 17 00:00:00 2001
From: miha-yy <mojkakec12345@gmail.com>
Date: Tue, 8 Jul 2025 07:24:09 +0200
Subject: [PATCH 1/3] show content on edit

---
 .../assistant/FixWithChat.tsx                 |   2 +
 apps/web/components/assistant-chat/chat.tsx   |   5 +
 .../assistant-chat/email-display-example.tsx  | 107 ++++++++++++
 .../assistant-chat/multimodal-input.tsx       | 154 ++++++++++++++----
 apps/web/utils/email-display.ts               |  87 ++++++++++
 5 files changed, 327 insertions(+), 28 deletions(-)
 create mode 100644 apps/web/components/assistant-chat/email-display-example.tsx
 create mode 100644 apps/web/utils/email-display.ts

diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/FixWithChat.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/FixWithChat.tsx
index bd946a5f1f..6a5b793a75 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/FixWithChat.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/FixWithChat.tsx
@@ -24,6 +24,7 @@ import { ButtonList } from "@/components/ButtonList";
 import type { RulesResponse } from "@/app/api/user/rules/route";
 import { ProcessResultDisplay } from "@/app/(app)/[emailAccountId]/assistant/ProcessResultDisplay";
 import { NONE_RULE_ID } from "@/app/(app)/[emailAccountId]/assistant/consts";
+import { createEmailDisplayValue } from "@/utils/email-display";
 
 export function FixWithChat({
   setInput,
@@ -84,6 +85,7 @@ export function FixWithChat({
 
                 if (setInput) {
                   // this is only set if we're in the correct context
+                  // The input will automatically show as "@(Subject)" in the chat
                   setInput(input);
                 } else {
                   // redirect to the assistant page
diff --git a/apps/web/components/assistant-chat/chat.tsx b/apps/web/components/assistant-chat/chat.tsx
index 81f0e35fce..a9d3642aa2 100644
--- a/apps/web/components/assistant-chat/chat.tsx
+++ b/apps/web/components/assistant-chat/chat.tsx
@@ -36,6 +36,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { ExamplesDialog } from "@/components/assistant-chat/examples-dialog";
 import { Tooltip } from "@/components/Tooltip";
 import { toastError } from "@/components/Toast";
+import { createDisplayValueForInput } from "@/utils/email-display";
 
 // Some mega hacky code used here to workaround AI SDK's use of SWR
 // AI SDK uses SWR too and this messes with the global SWR config
@@ -180,6 +181,9 @@ function ChatUI({ chat }: { chat: ReturnType<typeof useChat> }) {
     reload,
   } = chat;
 
+  // Create display value for email data
+  const displayValue = createDisplayValueForInput(input);
+
   return (
     <div className="flex h-full min-w-0 flex-col bg-background">
       <SWRProvider>
@@ -223,6 +227,7 @@ function ChatUI({ chat }: { chat: ReturnType<typeof useChat> }) {
           // messages={messages}
           setMessages={setMessages}
           // append={append}
+          displayValue={displayValue}
         />
       </form>
     </div>
diff --git a/apps/web/components/assistant-chat/email-display-example.tsx b/apps/web/components/assistant-chat/email-display-example.tsx
new file mode 100644
index 0000000000..76e52aef93
--- /dev/null
+++ b/apps/web/components/assistant-chat/email-display-example.tsx
@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { MultimodalInput } from "./multimodal-input";
+import {
+  createDisplayValueForInput,
+  extractEmailContentForTooltip,
+} from "@/utils/email-display";
+
+export function EmailDisplayExample() {
+  const [input, setInput] = useState("");
+
+  // Example email data input
+  const exampleEmailInput = `You applied the wrong rule to this email.
+Fix our rules so this type of email is handled correctly in the future.
+
+Email details:
+*From*: john@example.com
+*Subject*: Meeting Tomorrow
+*Content*: Hi, just wanted to confirm our meeting tomorrow at 2 PM.
+
+Current rule applied: Archive
+
+Reason the rule was chosen:
+This email appears to be a meeting confirmation.
+
+The rule that should have been applied was: "Meeting Confirmations"`;
+
+  // Example of what the display will look like
+  const exampleDisplay = `You applied the wrong rule to this email.
+Fix our rules so this type of email is handled correctly in the future.
+
+Email details:
+📧 [Meeting Tomorrow]
+
+Current rule applied: Archive
+
+Reason the rule was chosen:
+This email appears to be a meeting confirmation.
+
+The rule that should have been applied was: "Meeting Confirmations"`;
+
+  const displayValue = createDisplayValueForInput(input);
+  const emailTooltipContent = extractEmailContentForTooltip(input);
+
+  return (
+    <div className="space-y-4 p-4">
+      <h3 className="text-lg font-semibold">Email Display Example</h3>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">
+          Input (what gets sent to AI):
+        </label>
+        <textarea
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          className="h-32 w-full rounded border p-2"
+          placeholder="Type or paste email data here..."
+        />
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">
+          Display Value (what user sees):
+        </label>
+        <div className="whitespace-pre-wrap rounded bg-gray-100 p-2">
+          {displayValue || "No display value (shows original input)"}
+        </div>
+        {displayValue && (
+          <div className="text-xs text-gray-600">
+            <strong>Example:</strong> {exampleDisplay}
+            {emailTooltipContent && (
+              <div className="mt-2">
+                <strong>Tooltip content:</strong>
+                <div className="whitespace-pre-wrap rounded bg-gray-200 p-2 text-xs">
+                  {emailTooltipContent}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">
+          Chat Input (with display):
+        </label>
+        <div className="rounded border">
+          <MultimodalInput
+            input={input}
+            setInput={setInput}
+            handleSubmit={() => {}}
+            status="ready"
+            stop={() => {}}
+            setMessages={() => {}}
+            displayValue={displayValue}
+          />
+        </div>
+      </div>
+
+      <button
+        onClick={() => setInput(exampleEmailInput)}
+        className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+      >
+        Load Example Email Data
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/components/assistant-chat/multimodal-input.tsx b/apps/web/components/assistant-chat/multimodal-input.tsx
index 7da355e7fa..a7cb89b58a 100644
--- a/apps/web/components/assistant-chat/multimodal-input.tsx
+++ b/apps/web/components/assistant-chat/multimodal-input.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type React from "react";
-import { useRef, useEffect, useCallback, memo } from "react";
+import { useRef, useEffect, useCallback, memo, useState } from "react";
 import { toast } from "sonner";
 import { useLocalStorage, useWindowSize } from "usehooks-ts";
 import type { UseChatHelpers } from "@ai-sdk/react";
@@ -9,6 +9,13 @@ import { ArrowUpIcon } from "lucide-react";
 import { StopIcon } from "./icons";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { extractEmailContentForTooltip } from "@/utils/email-display";
 // import { SuggestedActions } from "./suggested-actions";
 import { cn } from "@/utils";
 
@@ -23,6 +30,7 @@ function PureMultimodalInput({
   // append,
   handleSubmit,
   className,
+  displayValue,
 }: {
   // chatId?: string;
   input: UseChatHelpers["input"];
@@ -36,9 +44,11 @@ function PureMultimodalInput({
   // append: UseChatHelpers["append"];
   handleSubmit: UseChatHelpers["handleSubmit"];
   className?: string;
+  displayValue?: string;
 }) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { width } = useWindowSize();
+  const [isEditing, setIsEditing] = useState(false);
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -92,6 +102,16 @@ function PureMultimodalInput({
     // adjustHeight(); // handled in useEffect
   };
 
+  const handleFocus = () => {
+    if (displayValue !== undefined && displayValue !== input) {
+      setIsEditing(true);
+    }
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+  };
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   const submitForm = useCallback(() => {
     // window.history.replaceState({}, "", `/chat/${chatId}`);
@@ -106,40 +126,68 @@ function PureMultimodalInput({
     }
   }, [handleSubmit, setLocalStorageInput, width]);
 
+  // Use displayValue if provided and not editing, otherwise use input
+  const visibleValue =
+    displayValue !== undefined && !isEditing ? displayValue : input;
+
+  // Extract email content for tooltip
+  const emailTooltipContent = extractEmailContentForTooltip(input);
+
   return (
     <div className="relative flex w-full flex-col gap-4">
       {/* {messages.length === 0 && (
         <SuggestedActions append={append} chatId={chatId} />
       )} */}
 
-      <Textarea
-        data-testid="multimodal-input"
-        ref={textareaRef}
-        placeholder="Send a message..."
-        value={input}
-        onChange={handleInput}
-        className={cn(
-          "max-h-[calc(75dvh)] min-h-[24px] resize-none overflow-hidden rounded-2xl bg-muted pb-10 !text-base dark:border-zinc-700",
-          className,
-        )}
-        rows={2}
-        autoFocus
-        onKeyDown={(event) => {
-          if (
-            event.key === "Enter" &&
-            !event.shiftKey &&
-            !event.nativeEvent.isComposing
-          ) {
-            event.preventDefault();
-
-            if (status !== "ready") {
-              toast.error("Please wait for the model to finish its response!");
-            } else {
-              submitForm();
+      {displayValue !== undefined && !isEditing && emailTooltipContent ? (
+        <TooltipProvider>
+          <div
+            className={cn(
+              "max-h-[calc(75dvh)] min-h-[24px] cursor-text resize-none overflow-hidden rounded-2xl bg-muted p-3 pb-10 !text-base dark:border-zinc-700",
+              className,
+            )}
+            onClick={() => setIsEditing(true)}
+          >
+            <RichTextDisplay
+              text={visibleValue}
+              emailTooltipContent={emailTooltipContent}
+            />
+          </div>
+        </TooltipProvider>
+      ) : (
+        <Textarea
+          data-testid="multimodal-input"
+          ref={textareaRef}
+          placeholder="Send a message..."
+          value={visibleValue}
+          onChange={handleInput}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={cn(
+            "max-h-[calc(75dvh)] min-h-[24px] resize-none overflow-hidden rounded-2xl bg-muted pb-10 !text-base dark:border-zinc-700",
+            className,
+          )}
+          rows={2}
+          autoFocus
+          onKeyDown={(event) => {
+            if (
+              event.key === "Enter" &&
+              !event.shiftKey &&
+              !event.nativeEvent.isComposing
+            ) {
+              event.preventDefault();
+
+              if (status !== "ready") {
+                toast.error(
+                  "Please wait for the model to finish its response!",
+                );
+              } else {
+                submitForm();
+              }
             }
-          }
-        }}
-      />
+          }}
+        />
+      )}
 
       <div className="absolute bottom-0 right-0 flex w-fit flex-row justify-end p-2">
         {status === "submitted" ? (
@@ -157,6 +205,7 @@ export const MultimodalInput = memo(
   (prevProps, nextProps) => {
     if (prevProps.input !== nextProps.input) return false;
     if (prevProps.status !== nextProps.status) return false;
+    if (prevProps.displayValue !== nextProps.displayValue) return false;
     // if (!equal(prevProps.attachments, nextProps.attachments)) return false;
 
     return true;
@@ -213,3 +262,52 @@ const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
   if (prevProps.input !== nextProps.input) return false;
   return true;
 });
+
+function RichTextDisplay({
+  text,
+  emailTooltipContent,
+}: {
+  text: string;
+  emailTooltipContent: string;
+}) {
+  // Split text by lines to process each line
+  const lines = text.split("\n");
+
+  return (
+    <div className="whitespace-pre-wrap">
+      {lines.map((line, index) => {
+        // Check if this line contains the email tag
+        const emailTagMatch = line.match(/📧 \[([^\]]+)\]/);
+
+        if (emailTagMatch) {
+          const subject = emailTagMatch[1];
+          const beforeTag = line.substring(0, line.indexOf("📧"));
+          const afterTag = line.substring(
+            line.indexOf("📧") + emailTagMatch[0].length,
+          );
+
+          return (
+            <div key={index}>
+              {beforeTag}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex cursor-help items-center rounded-md bg-blue-100 px-2 py-1 text-sm font-medium text-blue-800 transition-colors hover:bg-blue-200">
+                    📧 [{subject}]
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-md">
+                  <div className="whitespace-pre-wrap text-sm">
+                    {emailTooltipContent}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+              {afterTag}
+            </div>
+          );
+        }
+
+        return <div key={index}>{line}</div>;
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/utils/email-display.ts b/apps/web/utils/email-display.ts
new file mode 100644
index 0000000000..d0d3b7e6d4
--- /dev/null
+++ b/apps/web/utils/email-display.ts
@@ -0,0 +1,87 @@
+import type { ParsedMessage } from "@/utils/types";
+
+/**
+ * Creates a simplified display value for email data in chat input
+ * Shows "@(Subject)" format while keeping full data under the hood
+ */
+export function createEmailDisplayValue(message: ParsedMessage): string {
+  const subject = message.headers.subject || "No subject";
+  return `@(${subject})`;
+}
+
+/**
+ * Checks if the input contains email data that should be displayed in simplified format
+ */
+export function hasEmailData(input: string): boolean {
+  // Check if input contains email-related patterns
+  return (
+    input.includes("*From*:") ||
+    input.includes("*Subject*:") ||
+    input.includes("*Content*:") ||
+    input.includes("Email details:") ||
+    input.includes("Current rule applied:")
+  );
+}
+
+/**
+ * Extracts the subject from email data input for display purposes
+ */
+export function extractSubjectFromInput(input: string): string | null {
+  const subjectMatch = input.match(/\*Subject\*:\s*(.+?)(?:\n|$)/);
+  return subjectMatch ? subjectMatch[1].trim() : null;
+}
+
+/**
+ * Creates a display value for email-related input
+ * Replaces the email details section with a simplified version
+ */
+export function createDisplayValueForInput(input: string): string | undefined {
+  if (!hasEmailData(input)) {
+    return undefined; // Use original input
+  }
+
+  const subject = extractSubjectFromInput(input);
+  if (!subject) {
+    return input; // Keep original if no subject found
+  }
+
+  // Replace the email details section with simplified version
+  const emailDetailsPattern =
+    /Email details:\s*\*From\*:[\s\S]*?\*Content\*:[\s\S]*?(?=\n\n|\nCurrent rule|$)/;
+  const replacement = `Email details:\n📧 [${subject}]`;
+
+  const displayValue = input.replace(emailDetailsPattern, replacement);
+
+  return displayValue;
+}
+
+/**
+ * Extracts the full email content for tooltip display
+ */
+export function extractEmailContentForTooltip(input: string): string | null {
+  if (!hasEmailData(input)) {
+    return null;
+  }
+
+  const emailDetailsMatch = input.match(
+    /Email details:\s*\*From\*:([\s\S]*?)(?=\n\n|\nCurrent rule|$)/,
+  );
+  if (!emailDetailsMatch) {
+    return null;
+  }
+
+  const emailDetails = emailDetailsMatch[1].trim();
+
+  // Format the email details nicely for the tooltip
+  const fromMatch = emailDetails.match(/\*From\*:\s*(.+?)(?:\n|$)/);
+  const subjectMatch = emailDetails.match(/\*Subject\*:\s*(.+?)(?:\n|$)/);
+  const contentMatch = emailDetails.match(
+    /\*Content\*:\s*([\s\S]*?)(?:\n\*|$)/,
+  );
+
+  if (!fromMatch || !subjectMatch || !contentMatch) {
+    return null;
+  }
+
+  return `From: ${fromMatch[1].trim()}\nSubject: ${subjectMatch[1].trim()}\nContent: ${contentMatch[1].trim()}`;
+}

From 1047abbdf2aa9ac26f12d760f701231d3b10fec6 Mon Sep 17 00:00:00 2001
From: miha-yy <mojkakec12345@gmail.com>
Date: Tue, 8 Jul 2025 07:27:42 +0200
Subject: [PATCH 2/3] simplify the code

---
 .../assistant-chat/email-display-example.tsx  |  14 +-
 .../assistant-chat/multimodal-input.tsx       | 136 ++++--------------
 apps/web/utils/email-display.ts               |  31 ----
 3 files changed, 30 insertions(+), 151 deletions(-)

diff --git a/apps/web/components/assistant-chat/email-display-example.tsx b/apps/web/components/assistant-chat/email-display-example.tsx
index 76e52aef93..31f1c02ee0 100644
--- a/apps/web/components/assistant-chat/email-display-example.tsx
+++ b/apps/web/components/assistant-chat/email-display-example.tsx
@@ -1,9 +1,6 @@
 import { useState } from "react";
 import { MultimodalInput } from "./multimodal-input";
-import {
-  createDisplayValueForInput,
-  extractEmailContentForTooltip,
-} from "@/utils/email-display";
+import { createDisplayValueForInput } from "@/utils/email-display";
 
 export function EmailDisplayExample() {
   const [input, setInput] = useState("");
@@ -39,7 +36,6 @@ This email appears to be a meeting confirmation.
 The rule that should have been applied was: "Meeting Confirmations"`;
 
   const displayValue = createDisplayValueForInput(input);
-  const emailTooltipContent = extractEmailContentForTooltip(input);
 
   return (
     <div className="space-y-4 p-4">
@@ -67,14 +63,6 @@ The rule that should have been applied was: "Meeting Confirmations"`;
         {displayValue && (
           <div className="text-xs text-gray-600">
             <strong>Example:</strong> {exampleDisplay}
-            {emailTooltipContent && (
-              <div className="mt-2">
-                <strong>Tooltip content:</strong>
-                <div className="whitespace-pre-wrap rounded bg-gray-200 p-2 text-xs">
-                  {emailTooltipContent}
-                </div>
-              </div>
-            )}
           </div>
         )}
       </div>
diff --git a/apps/web/components/assistant-chat/multimodal-input.tsx b/apps/web/components/assistant-chat/multimodal-input.tsx
index a7cb89b58a..283a9a91c6 100644
--- a/apps/web/components/assistant-chat/multimodal-input.tsx
+++ b/apps/web/components/assistant-chat/multimodal-input.tsx
@@ -9,13 +9,6 @@ import { ArrowUpIcon } from "lucide-react";
 import { StopIcon } from "./icons";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { extractEmailContentForTooltip } from "@/utils/email-display";
 // import { SuggestedActions } from "./suggested-actions";
 import { cn } from "@/utils";
 
@@ -130,64 +123,42 @@ function PureMultimodalInput({
   const visibleValue =
     displayValue !== undefined && !isEditing ? displayValue : input;
 
-  // Extract email content for tooltip
-  const emailTooltipContent = extractEmailContentForTooltip(input);
-
   return (
     <div className="relative flex w-full flex-col gap-4">
       {/* {messages.length === 0 && (
         <SuggestedActions append={append} chatId={chatId} />
       )} */}
 
-      {displayValue !== undefined && !isEditing && emailTooltipContent ? (
-        <TooltipProvider>
-          <div
-            className={cn(
-              "max-h-[calc(75dvh)] min-h-[24px] cursor-text resize-none overflow-hidden rounded-2xl bg-muted p-3 pb-10 !text-base dark:border-zinc-700",
-              className,
-            )}
-            onClick={() => setIsEditing(true)}
-          >
-            <RichTextDisplay
-              text={visibleValue}
-              emailTooltipContent={emailTooltipContent}
-            />
-          </div>
-        </TooltipProvider>
-      ) : (
-        <Textarea
-          data-testid="multimodal-input"
-          ref={textareaRef}
-          placeholder="Send a message..."
-          value={visibleValue}
-          onChange={handleInput}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          className={cn(
-            "max-h-[calc(75dvh)] min-h-[24px] resize-none overflow-hidden rounded-2xl bg-muted pb-10 !text-base dark:border-zinc-700",
-            className,
-          )}
-          rows={2}
-          autoFocus
-          onKeyDown={(event) => {
-            if (
-              event.key === "Enter" &&
-              !event.shiftKey &&
-              !event.nativeEvent.isComposing
-            ) {
-              event.preventDefault();
-
-              if (status !== "ready") {
-                toast.error(
-                  "Please wait for the model to finish its response!",
-                );
-              } else {
-                submitForm();
-              }
+      <Textarea
+        data-testid="multimodal-input"
+        ref={textareaRef}
+        placeholder="Send a message..."
+        value={visibleValue}
+        onChange={handleInput}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        className={cn(
+          "max-h-[calc(75dvh)] min-h-[24px] resize-none overflow-hidden rounded-2xl bg-muted pb-10 !text-base dark:border-zinc-700",
+          className,
+        )}
+        rows={2}
+        autoFocus
+        onKeyDown={(event) => {
+          if (
+            event.key === "Enter" &&
+            !event.shiftKey &&
+            !event.nativeEvent.isComposing
+          ) {
+            event.preventDefault();
+
+            if (status !== "ready") {
+              toast.error("Please wait for the model to finish its response!");
+            } else {
+              submitForm();
             }
-          }}
-        />
-      )}
+          }
+        }}
+      />
 
       <div className="absolute bottom-0 right-0 flex w-fit flex-row justify-end p-2">
         {status === "submitted" ? (
@@ -262,52 +233,3 @@ const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
   if (prevProps.input !== nextProps.input) return false;
   return true;
 });
-
-function RichTextDisplay({
-  text,
-  emailTooltipContent,
-}: {
-  text: string;
-  emailTooltipContent: string;
-}) {
-  // Split text by lines to process each line
-  const lines = text.split("\n");
-
-  return (
-    <div className="whitespace-pre-wrap">
-      {lines.map((line, index) => {
-        // Check if this line contains the email tag
-        const emailTagMatch = line.match(/📧 \[([^\]]+)\]/);
-
-        if (emailTagMatch) {
-          const subject = emailTagMatch[1];
-          const beforeTag = line.substring(0, line.indexOf("📧"));
-          const afterTag = line.substring(
-            line.indexOf("📧") + emailTagMatch[0].length,
-          );
-
-          return (
-            <div key={index}>
-              {beforeTag}
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="inline-flex cursor-help items-center rounded-md bg-blue-100 px-2 py-1 text-sm font-medium text-blue-800 transition-colors hover:bg-blue-200">
-                    📧 [{subject}]
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent side="top" className="max-w-md">
-                  <div className="whitespace-pre-wrap text-sm">
-                    {emailTooltipContent}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-              {afterTag}
-            </div>
-          );
-        }
-
-        return <div key={index}>{line}</div>;
-      })}
-    </div>
-  );
-}
diff --git a/apps/web/utils/email-display.ts b/apps/web/utils/email-display.ts
index d0d3b7e6d4..0d49e5b0f3 100644
--- a/apps/web/utils/email-display.ts
+++ b/apps/web/utils/email-display.ts
@@ -54,34 +54,3 @@ export function createDisplayValueForInput(input: string): string | undefined {
 
   return displayValue;
 }
-
-/**
- * Extracts the full email content for tooltip display
- */
-export function extractEmailContentForTooltip(input: string): string | null {
-  if (!hasEmailData(input)) {
-    return null;
-  }
-
-  const emailDetailsMatch = input.match(
-    /Email details:\s*\*From\*:([\s\S]*?)(?=\n\n|\nCurrent rule|$)/,
-  );
-  if (!emailDetailsMatch) {
-    return null;
-  }
-
-  const emailDetails = emailDetailsMatch[1].trim();
-
-  // Format the email details nicely for the tooltip
-  const fromMatch = emailDetails.match(/\*From\*:\s*(.+?)(?:\n|$)/);
-  const subjectMatch = emailDetails.match(/\*Subject\*:\s*(.+?)(?:\n|$)/);
-  const contentMatch = emailDetails.match(
-    /\*Content\*:\s*([\s\S]*?)(?:\n\*|$)/,
-  );
-
-  if (!fromMatch || !subjectMatch || !contentMatch) {
-    return null;
-  }
-
-  return `From: ${fromMatch[1].trim()}\nSubject: ${subjectMatch[1].trim()}\nContent: ${contentMatch[1].trim()}`;
-}

From 966c217a810aef6b6b94f88c0d9a977fb48bf5a7 Mon Sep 17 00:00:00 2001
From: miha-yy <mojkakec12345@gmail.com>
Date: Tue, 8 Jul 2025 07:32:19 +0200
Subject: [PATCH 3/3] make it stand out more

---
 .../assistant-chat/email-display-example.tsx  | 95 -------------------
 apps/web/utils/email-display.ts               |  2 +-
 2 files changed, 1 insertion(+), 96 deletions(-)
 delete mode 100644 apps/web/components/assistant-chat/email-display-example.tsx

diff --git a/apps/web/components/assistant-chat/email-display-example.tsx b/apps/web/components/assistant-chat/email-display-example.tsx
deleted file mode 100644
index 31f1c02ee0..0000000000
--- a/apps/web/components/assistant-chat/email-display-example.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useState } from "react";
-import { MultimodalInput } from "./multimodal-input";
-import { createDisplayValueForInput } from "@/utils/email-display";
-
-export function EmailDisplayExample() {
-  const [input, setInput] = useState("");
-
-  // Example email data input
-  const exampleEmailInput = `You applied the wrong rule to this email.
-Fix our rules so this type of email is handled correctly in the future.
-
-Email details:
-*From*: john@example.com
-*Subject*: Meeting Tomorrow
-*Content*: Hi, just wanted to confirm our meeting tomorrow at 2 PM.
-
-Current rule applied: Archive
-
-Reason the rule was chosen:
-This email appears to be a meeting confirmation.
-
-The rule that should have been applied was: "Meeting Confirmations"`;
-
-  // Example of what the display will look like
-  const exampleDisplay = `You applied the wrong rule to this email.
-Fix our rules so this type of email is handled correctly in the future.
-
-Email details:
-📧 [Meeting Tomorrow]
-
-Current rule applied: Archive
-
-Reason the rule was chosen:
-This email appears to be a meeting confirmation.
-
-The rule that should have been applied was: "Meeting Confirmations"`;
-
-  const displayValue = createDisplayValueForInput(input);
-
-  return (
-    <div className="space-y-4 p-4">
-      <h3 className="text-lg font-semibold">Email Display Example</h3>
-
-      <div className="space-y-2">
-        <label className="text-sm font-medium">
-          Input (what gets sent to AI):
-        </label>
-        <textarea
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          className="h-32 w-full rounded border p-2"
-          placeholder="Type or paste email data here..."
-        />
-      </div>
-
-      <div className="space-y-2">
-        <label className="text-sm font-medium">
-          Display Value (what user sees):
-        </label>
-        <div className="whitespace-pre-wrap rounded bg-gray-100 p-2">
-          {displayValue || "No display value (shows original input)"}
-        </div>
-        {displayValue && (
-          <div className="text-xs text-gray-600">
-            <strong>Example:</strong> {exampleDisplay}
-          </div>
-        )}
-      </div>
-
-      <div className="space-y-2">
-        <label className="text-sm font-medium">
-          Chat Input (with display):
-        </label>
-        <div className="rounded border">
-          <MultimodalInput
-            input={input}
-            setInput={setInput}
-            handleSubmit={() => {}}
-            status="ready"
-            stop={() => {}}
-            setMessages={() => {}}
-            displayValue={displayValue}
-          />
-        </div>
-      </div>
-
-      <button
-        onClick={() => setInput(exampleEmailInput)}
-        className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-      >
-        Load Example Email Data
-      </button>
-    </div>
-  );
-}
diff --git a/apps/web/utils/email-display.ts b/apps/web/utils/email-display.ts
index 0d49e5b0f3..77c46536b9 100644
--- a/apps/web/utils/email-display.ts
+++ b/apps/web/utils/email-display.ts
@@ -48,7 +48,7 @@ export function createDisplayValueForInput(input: string): string | undefined {
   // Replace the email details section with simplified version
   const emailDetailsPattern =
     /Email details:\s*\*From\*:[\s\S]*?\*Content\*:[\s\S]*?(?=\n\n|\nCurrent rule|$)/;
-  const replacement = `Email details:\n📧 [${subject}]`;
+  const replacement = `Email details:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n📧 [${subject}]\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`;
 
   const displayValue = input.replace(emailDetailsPattern, replacement);