فهرست منبع

fix(app): user message expand on click

Adam 1 ماه پیش
والد
کامیت
353115a895
1فایلهای تغییر یافته به همراه18 افزوده شده و 3 حذف شده
  1. 18 3
      packages/ui/src/components/message-part.tsx

+ 18 - 3
packages/ui/src/components/message-part.tsx

@@ -357,6 +357,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
     setTimeout(() => setCopied(false), 2000)
   }
 
+  const toggleExpanded = () => {
+    if (!canExpand()) return
+    setExpanded((value) => !value)
+  }
+
   return (
     <div data-component="user-message" data-expanded={expanded()} data-can-expand={canExpand()}>
       <Show when={attachments().length > 0}>
@@ -388,19 +393,29 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
         </div>
       </Show>
       <Show when={text()}>
-        <div data-slot="user-message-text" ref={(el) => (textRef = el)}>
+        <div data-slot="user-message-text" ref={(el) => (textRef = el)} onClick={toggleExpanded}>
           <HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
           <button
             data-slot="user-message-expand"
             type="button"
             aria-label={expanded() ? "Collapse message" : "Expand message"}
-            onClick={() => setExpanded((v) => !v)}
+            onClick={(event) => {
+              event.stopPropagation()
+              toggleExpanded()
+            }}
           >
             <Icon name="chevron-down" size="small" />
           </button>
           <div data-slot="user-message-copy-wrapper">
             <Tooltip value={copied() ? "Copied!" : "Copy"} placement="top" gutter={8}>
-              <IconButton icon={copied() ? "check" : "copy"} variant="secondary" onClick={handleCopy} />
+              <IconButton
+                icon={copied() ? "check" : "copy"}
+                variant="secondary"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  handleCopy()
+                }}
+              />
             </Tooltip>
           </div>
         </div>