docs: share page attachment

3 files changed, 29 insertions, 6 deletions

diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx
index 90a1ffceb..53a249d5b 100644
--- a/packages/web/src/components/Share.tsx
+++ b/packages/web/src/components/Share.tsx
@@ -321,6 +321,7 @@ export default function Share(props: {
                   const filteredParts = createMemo(() =>
                     msg.parts.filter((x, index) => {
                       if (x.type === "step-start" && index > 0) return false
+                      if (x.type === "text" && x.synthetic === true) return false
                       if (x.type === "tool" && x.tool === "todoread") return false
                       if (x.type === "text" && !x.text) return false
                       if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running"))
diff --git a/packages/web/src/components/share/part.module.css b/packages/web/src/components/share/part.module.css
index 9145cddf7..a11221ea1 100644
--- a/packages/web/src/components/share/part.module.css
+++ b/packages/web/src/components/share/part.module.css
@@ -137,6 +137,29 @@
     }
   }
 
+  [data-component="attachment"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.375rem;
+    padding-bottom: 1rem;
+
+    [data-slot="copy"] {
+      line-height: 18px;
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: -0.5px;
+      color: var(--sl-color-text-secondary);
+    }
+
+    [data-slot="filename"] {
+      line-height: 1.5;
+      font-size: 0.875rem;
+      font-weight: 500;
+      max-width: var(--md-tool-width);
+    }
+  }
+
   [data-component="button-text"] {
     cursor: pointer;
     appearance: none;
diff --git a/packages/web/src/components/share/part.tsx b/packages/web/src/components/share/part.tsx
index 4d95fa528..d2b6bd925 100644
--- a/packages/web/src/components/share/part.tsx
+++ b/packages/web/src/components/share/part.tsx
@@ -15,6 +15,7 @@ import {
   IconSparkles,
   IconGlobeAlt,
   IconDocument,
+  IconPaperClip,
   IconQueueList,
   IconUserCircle,
   IconCommandLine,
@@ -80,7 +81,7 @@ export function Part(props: PartProps) {
                 <IconUserCircle width={18} height={18} />
               </Match>
               <Match when={props.message.role === "user" && props.part.type === "file"}>
-                <IconDocument width={18} height={18} />
+                <IconPaperClip width={18} height={18} />
               </Match>
               <Match when={props.part.type === "step-start" && props.message.role === "assistant" && props.message.modelID}>
                 {model => <ProviderIcon model={model()} size={18} />}
@@ -152,11 +153,9 @@ export function Part(props: PartProps) {
           </>
         )}
         {props.message.role === "user" && props.part.type === "file" && (
-          <div data-component="tool-title">
-            <span data-slot="name">Read</span>
-            <span data-slot="target" title={props.part.filename}>
-              {props.part.filename}
-            </span>
+          <div data-component="attachment">
+            <div data-slot="copy">Attachment</div>
+            <div data-slot="filename">{props.part.filename}</div>
           </div>
         )}
         {props.part.type === "step-start" && props.message.role === "assistant" && (