From 31bcf19bda30e711d50faae4e9ed4e66cf63f1fb Mon Sep 17 00:00:00 2001 From: Douglas Date: Thu, 23 Apr 2026 11:18:57 +0100 Subject: [PATCH] refactor(chat): use ds-* Tailwind utilities in message components Replace bg-[var(--ds-*)], text-[color:var(--ds-*)], and border arbitrary values with bg-ds-*, text-ds-*, and border-ds-* across cards and markdown. Made-with: Cursor --- .../ChatBox/MessageItem/AgentMessageCard.tsx | 8 +++--- .../ChatBox/MessageItem/FeedbackCard.tsx | 6 ++-- .../ChatBox/MessageItem/MarkDown.tsx | 4 +-- .../ChatBox/MessageItem/NoticeCard.tsx | 2 +- .../ChatBox/MessageItem/SummaryMarkDown.tsx | 28 +++++++++---------- .../ChatBox/MessageItem/UserMessageCard.tsx | 14 +++++----- .../MessageItem/UserMessageRichContent.tsx | 4 +-- 7 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/components/ChatBox/MessageItem/AgentMessageCard.tsx b/src/components/ChatBox/MessageItem/AgentMessageCard.tsx index 3de8ba39..687bd551 100644 --- a/src/components/ChatBox/MessageItem/AgentMessageCard.tsx +++ b/src/components/ChatBox/MessageItem/AgentMessageCard.tsx @@ -113,14 +113,14 @@ export function AgentMessageCard({ ipcRenderer?.invoke('reveal-in-folder', file.filePath); }} key={'attache-' + file.fileName} - className="gap-2 rounded-2xl py-1 pl-2 flex w-full cursor-pointer items-center border border-solid border-[color:var(--ds-border-neutral-subtle-default)] bg-[var(--ds-bg-neutral-default-default)]" + className="gap-2 rounded-2xl py-1 pl-2 flex w-full cursor-pointer items-center border border-solid border-ds-border-neutral-subtle-default bg-ds-bg-neutral-default-default" >
-
+
{file?.fileName?.split('.')[0]}
-
+
{file?.fileName?.split('.')[1]}
@@ -142,7 +142,7 @@ export function AgentMessageCard({ aria-label={t('setting.copy')} > {copied ? ( - + ) : ( )} diff --git a/src/components/ChatBox/MessageItem/FeedbackCard.tsx b/src/components/ChatBox/MessageItem/FeedbackCard.tsx index 1bf6267a..a5424410 100644 --- a/src/components/ChatBox/MessageItem/FeedbackCard.tsx +++ b/src/components/ChatBox/MessageItem/FeedbackCard.tsx @@ -83,7 +83,7 @@ export function FeedbackCard({ buttonContent="icon-only" > {copied ? ( - + ) : ( )} @@ -91,12 +91,12 @@ export function FeedbackCard({
{/* Title */} -

+

{title}

{/* Content */} -

+

{content}

diff --git a/src/components/ChatBox/MessageItem/MarkDown.tsx b/src/components/ChatBox/MessageItem/MarkDown.tsx index f1cd521e..dd3d18f8 100644 --- a/src/components/ChatBox/MessageItem/MarkDown.tsx +++ b/src/components/ChatBox/MessageItem/MarkDown.tsx @@ -143,7 +143,7 @@ export const MarkDown = memo( .join('\n') .trim(); setHtml( - `
${escapeHtml(formattedHtml)}
` + `
${escapeHtml(formattedHtml)}
` ); if (displayedContent === content && renderCompleteRef.current) { renderCompleteRef.current(); @@ -187,7 +187,7 @@ export const MarkDown = memo( // Fallback: show alt text or placeholder const altMatch = fullTag.match(/alt=["']([^"']*)["']/); const alt = altMatch ? altMatch[1] : 'image'; - const placeholder = `[${alt}]`; + const placeholder = `[${alt}]`; rawHtml = rawHtml.replace(fullTag, placeholder); } } catch (error) { diff --git a/src/components/ChatBox/MessageItem/NoticeCard.tsx b/src/components/ChatBox/MessageItem/NoticeCard.tsx index 4c1418ec..260d24b5 100644 --- a/src/components/ChatBox/MessageItem/NoticeCard.tsx +++ b/src/components/ChatBox/MessageItem/NoticeCard.tsx @@ -92,7 +92,7 @@ export function NoticeCard() { key={`taskList-${index}`} className={`gap-2 rounded-lg ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex cursor-pointer border border-solid border-transparent transition-all duration-300`} > -
+
{cot}
diff --git a/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx b/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx index eba7242a..1a7fe48d 100644 --- a/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx +++ b/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx @@ -67,7 +67,7 @@ export const SummaryMarkDown = ({ .trim(); return (
- 
+        
           {formattedHtml}
@@ -79,67 +79,67 @@ export const SummaryMarkDown = ({ ( -

+

{children}

), h2: ({ children }) => ( -

+

{children}

), h3: ({ children }) => ( -

+

{children}

), p: ({ children }) => ( -

+

{children}

), ul: ({ children }) => ( -
    +
      {children}
    ), ol: ({ children }) => ( -
      +
        {children}
      ), li: ({ children }) => ( -
    1. +
    2. {children}
      3. ), code: ({ children }) => ( - + {children} ), pre: ({ children }) => ( - 
      +            
                     {children}
             
      
           ),
           blockquote: ({ children }) => (
-            
      
+            
      
               {children}
             
      
           ),
           strong: ({ children }) => (
-            
+            
               {children}
             
           ),
           em: ({ children }) => (
-            
+            
               {children}
             
           ),
           hr: () => (
-            
      
+            
      
           ),
         }}
       >
diff --git a/src/components/ChatBox/MessageItem/UserMessageCard.tsx b/src/components/ChatBox/MessageItem/UserMessageCard.tsx
index f229b815..77ae1f50 100644
--- a/src/components/ChatBox/MessageItem/UserMessageCard.tsx
+++ b/src/components/ChatBox/MessageItem/UserMessageCard.tsx
@@ -174,7 +174,7 @@ export function UserMessageCard({
                         {/* File Name */}
                         
      
@@ -195,14 +195,14 @@ export function UserMessageCard({
                           size="xs"
                           buttonContent="text"
                           variant="ghost"
-                          className="rounded-lg relative flex items-center bg-[var(--ds-bg-neutral-strong-default)]"
+                          className="rounded-lg relative flex items-center bg-ds-bg-neutral-strong-default"
                           onMouseEnter={openRemainingPopover}
                           onMouseLeave={scheduleCloseRemainingPopover}
                           onClick={(e) => {
                             e.stopPropagation();
                           }}
                         >
-                          
+                          
                             {remainingCount}+
                           
                         
@@ -210,7 +210,7 @@ export function UserMessageCard({
                       
@@ -219,7 +219,7 @@ export function UserMessageCard({
                             return (
                               
      
                                   setHoveredFilePath((prev) =>
                                     prev === file.filePath ? null : prev
@@ -237,7 +237,7 @@ export function UserMessageCard({
                                 
      
                                   {getFileIcon(file.fileName)}
                                 
      
-                                
      
+                                
      
                                   {file.fileName}
                                 
      
                               
      
@@ -308,7 +308,7 @@ export function UserMessageCard({
             buttonContent="icon-only"
           >
             {copied ? (
-              
+              
             ) : (
               
             )}
diff --git a/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx b/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx
index 2d35d30d..adf30735 100644
--- a/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx
+++ b/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx
@@ -122,8 +122,8 @@ export function UserMessageRichContent({
 
   const bodyClass =
     variant === 'card'
-      ? 'text-[color:var(--ds-text-neutral-default-default)] font-sans relative z-0 break-words whitespace-pre-wrap'
-      : 'text-[color:var(--ds-text-neutral-muted-default)] font-sans relative z-0 min-w-0 break-words font-normal line-clamp-1';
+      ? 'text-ds-text-neutral-default-default font-sans relative z-0 break-words whitespace-pre-wrap'
+      : 'text-ds-text-neutral-muted-default font-sans relative z-0 min-w-0 break-words font-normal line-clamp-1';
 
   return (