@adea-ai/ui 0.60.4 → 0.61.0

package/dist/components/conversation/message-row.d.ts

@@ -0,0 +1,101 @@
+import type { ComponentProps, JSX } from 'solid-js';
+import { type ConversationAvatarKind } from './conversation-avatar';
+/**
+ * MessageRow.
+ *
+ * One turn in a transcript: a speaker, a bubble, and the actions that apply to it.
+ *
+ * ## What it does not know
+ *
+ * It takes no domain types. A caller supplies the speaker's name, the timestamp, and
+ * the body as children; attachments, a linked task and the action row are slots. That
+ * is deliberate and it is the difference between a component a second application can
+ * use and one that only fits the application it was written in — the first version of
+ * this row was written against adea's message model and could not have been used by
+ * cortana at all.
+ *
+ * ## The two things it does know
+ *
+ * **The speaker's own messages mirror.** A user's turn puts the avatar on the trailing
+ * edge and the bubble on the leading one, so a transcript can be read as a
+ * conversation rather than as a log. `senderKind` decides that, and it is the only
+ * place the layout branches.
+ *
+ * **`content-visibility: auto`.** A transcript is the one list in an application that
+ * can hold thousands of rows, and this lets the engine skip layout and paint for the
+ * ones off screen. `contain-intrinsic-size` is what keeps the scrollbar honest while
+ * it does — without it the scroll height collapses as rows are skipped and the
+ * thumb jumps. Both are load-bearing rather than an optimisation to add later.
+ */
+export type MessageRowProps = Omit<ComponentProps<'article'>, 'onSelect'> & {
+    /** Who spoke. Decides the mirroring and the avatar's tone. */
+    senderKind: ConversationAvatarKind;
+    /** The speaker's name, announced with the message rather than drawn. */
+    senderName: string;
+    /** An ISO timestamp, rendered by the caller's own formatter. */
+    time?: string;
+    /** The machine-readable time, for `<time datetime>`. */
+    dateTime?: string;
+    /** Set when the message has been edited after sending. */
+    edited?: boolean;
+    /** Set while the message is in flight. */
+    pending?: boolean;
+    /**
+     * Set while tokens are still arriving. Shows a caret after the body and drops
+     * the delivered tick; distinct from `pending`, which is the *sending* state of
+     * a message the user wrote. A turn can be neither, either, or (briefly) both.
+     */
+    streaming?: boolean;
+    /** Set when the message has been deleted, which replaces the body. */
+    deleted?: boolean;
+    /** Draw attention to this row, e.g. after arriving from a search result. */
+    highlighted?: boolean;
+    /** The caller's own avatar content. Falls back to a glyph for the kind. */
+    avatar?: JSX.Element;
+    /** Attachments, rendered under the body. */
+    attachments?: JSX.Element;
+    /** A linked entity — a task, an artifact, a session — rendered under the body. */
+    link?: JSX.Element;
+    /** Extra rows in the action strip, before the built-in ones. */
+    actions?: JSX.Element;
+    /** Show the reply affordance. Omit it to hide the action. */
+    onOpenThread?: () => void;
+    /** Fires on hover and focus of the reply affordance, for prefetching. */
+    onThreadIntent?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onRetry?: () => void;
+};
+export declare function MessageRow(props: MessageRowProps): JSX.Element;
+/**
+ * A run of messages from the same speaker.
+ *
+ * Consecutive turns from one voice are a *paragraph*, and a transcript that repeats
+ * the avatar and the name for each line reads as noise. The group draws the first
+ * row fully and the rest without their avatar.
+ */
+export declare function MessageGroup(props: ComponentProps<'div'>): JSX.Element;
+/** A day divider, so a long transcript has somewhere to rest the eye. */
+export declare function MessageDayDivider(props: ComponentProps<'div'> & {
+    label: string;
+}): JSX.Element;
+/**
+ * Renders a body's code fences as blocks, which a plain `<p>` cannot.
+ *
+ * The fence grammar is the part worth owning: a fence opens with ``` and an
+ * optional language, and closes with ``` on its own. Everything outside a fence
+ * is prose, and inside it the language tag belongs to the block's header rather
+ * than to the code.
+ *
+ * Inline code — a single backtick pair inside a line — is rendered too, because
+ * the alternative is an identifier in the prose that is indistinguishable from a
+ * word. Only the *first* pair on a line is treated as code by the splitter here,
+ * which is the common case; a caller that needs full inline grammar should pass
+ * already-rendered children instead of `text`.
+ */
+export declare function MessageBody(props: ComponentProps<'div'> & {
+    text: string;
+    /** True while the turn is still streaming, so a partial fence renders as a block. */
+    streaming?: boolean;
+}): JSX.Element;
+//# sourceMappingURL=message-row.d.ts.map

package/dist/components/conversation/message-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-row.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD,OAAO,EAAsB,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAEvF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,8DAA8D;IAC9D,UAAU,EAAE,sBAAsB,CAAA;IAClC,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAA;IAClB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,kFAAkF;IAClF,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAiLhD;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAOxD;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,eAgBjF;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,eAsDF"}

package/dist/components/conversation/message-row.js

@@ -0,0 +1,389 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button/button.js";
+import { CodeBlock, InlineCode } from "../ui/code-block/code-block.js";
+import { ConversationAvatar } from "./conversation-avatar.js";
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { CheckCheck, MessageSquareReply, Pencil, RotateCcw, Trash2 } from "lucide-solid";
+import { For, Show, splitProps } from "solid-js";
+//#region src/components/conversation/message-row.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class="mt-2 flex flex-wrap gap-2">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class=mt-2>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<time>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span>edited`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span role=status>sending…`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span role=status>responding…`);
+var _tmpl$7 = /*#__PURE__*/ template(`<span role=img aria-label=Delivered class=inline-flex>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<article data-slot=message-row><span data-slot=message-avatar></span><div data-slot=message-content><div data-slot=message-bubble><span class=visually-hidden></span><div data-slot=message-body class=text-sm></div><div data-slot=message-meta class="mt-1 flex items-center gap-2 text-2xs text-muted-foreground"></div></div><footer data-slot=message-actions>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<p class="text-muted-foreground italic">Message deleted`);
+var _tmpl$0 = /*#__PURE__*/ template(`<div data-slot=message-group role=group>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div data-slot=message-day-divider role=separator><span class="h-px flex-1 bg-border"></span><span class="text-2xs font-medium tracking-wide text-muted-foreground uppercase"></span><span class="h-px flex-1 bg-border">`);
+var _tmpl$10 = /*#__PURE__*/ template(`<span class=streaming-caret aria-hidden=true>`);
+var _tmpl$11 = /*#__PURE__*/ template(`<div data-slot=message-body>`);
+var _tmpl$12 = /*#__PURE__*/ template(`<p class=whitespace-pre-wrap>`);
+function MessageRow(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"senderKind",
+		"senderName",
+		"time",
+		"dateTime",
+		"edited",
+		"pending",
+		"streaming",
+		"deleted",
+		"highlighted",
+		"avatar",
+		"attachments",
+		"link",
+		"actions",
+		"onOpenThread",
+		"onThreadIntent",
+		"onEdit",
+		"onDelete",
+		"onRetry",
+		"children"
+	]);
+	const mirrored = () => local.senderKind === "user";
+	return (() => {
+		var _el$ = _tmpl$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$9 = _el$6.nextSibling, _el$13 = _el$4.nextSibling;
+		spread(_el$, mergeProps({
+			get ["data-message-kind"]() {
+				return local.senderKind;
+			},
+			get ["aria-busy"]() {
+				return local.pending || void 0;
+			},
+			get tabindex() {
+				return local.highlighted ? -1 : void 0;
+			},
+			get ["class"]() {
+				return cn("group/message grid max-w-3xl gap-2.5 px-1 py-1.5", "[content-visibility:auto] [contain-intrinsic-size:auto_7rem]", mirrored() ? "grid-cols-[minmax(0,1fr)_2rem]" : "grid-cols-[1.9rem_minmax(0,1fr)]", "transition-colors ease-out hover:bg-muted/45", local.highlighted && "bg-primary-subtle shadow-[inset_3px_0_var(--primary)]", local.class);
+			}
+		}, rest), false, true);
+		insert(_el$2, createComponent(ConversationAvatar, {
+			get kind() {
+				return local.senderKind;
+			},
+			get size() {
+				return mirrored() ? "lg" : "md";
+			},
+			get children() {
+				return local.avatar;
+			}
+		}));
+		insert(_el$5, () => local.senderName);
+		insert(_el$6, createComponent(Show, {
+			get when() {
+				return !local.deleted;
+			},
+			get fallback() {
+				return _tmpl$9();
+			},
+			get children() {
+				return local.children;
+			}
+		}));
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return local.attachments;
+			},
+			get children() {
+				var _el$7 = _tmpl$();
+				insert(_el$7, () => local.attachments);
+				return _el$7;
+			}
+		}), _el$9);
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return local.link;
+			},
+			get children() {
+				var _el$8 = _tmpl$2();
+				insert(_el$8, () => local.link);
+				return _el$8;
+			}
+		}), _el$9);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return local.time;
+			},
+			get children() {
+				var _el$0 = _tmpl$3();
+				insert(_el$0, () => local.time);
+				effect(() => setAttribute(_el$0, "datetime", local.dateTime));
+				return _el$0;
+			}
+		}), null);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return local.edited;
+			},
+			get children() {
+				return _tmpl$4();
+			}
+		}), null);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return local.pending;
+			},
+			get children() {
+				return _tmpl$5();
+			}
+		}), null);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return local.streaming;
+			},
+			get children() {
+				return _tmpl$6();
+			}
+		}), null);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return memo(() => !!(mirrored() && !local.pending && !local.streaming))() && !local.deleted;
+			},
+			get children() {
+				var _el$12 = _tmpl$7();
+				insert(_el$12, createComponent(CheckCheck, {
+					"aria-hidden": "true",
+					"class": "size-3"
+				}));
+				return _el$12;
+			}
+		}), null);
+		insert(_el$13, createComponent(Show, {
+			get when() {
+				return local.actions;
+			},
+			get children() {
+				return local.actions;
+			}
+		}), null);
+		insert(_el$13, createComponent(Show, {
+			get when() {
+				return memo(() => !!local.onOpenThread)() && !local.deleted;
+			},
+			get children() {
+				return createComponent(Button, {
+					variant: "ghost",
+					size: "2xs",
+					"class": "gap-1.5 text-muted-foreground",
+					onClick: () => local.onOpenThread?.(),
+					onPointerEnter: () => local.onThreadIntent?.(),
+					onFocus: () => local.onThreadIntent?.(),
+					get children() {
+						return [createComponent(MessageSquareReply, {}), "Thread"];
+					}
+				});
+			}
+		}), null);
+		insert(_el$13, createComponent(Show, {
+			get when() {
+				return memo(() => !!local.onEdit)() && !local.deleted;
+			},
+			get children() {
+				return createComponent(Button, {
+					variant: "ghost",
+					size: "2xs",
+					"class": "gap-1.5 text-muted-foreground",
+					onClick: () => local.onEdit?.(),
+					get children() {
+						return [createComponent(Pencil, {}), "Edit"];
+					}
+				});
+			}
+		}), null);
+		insert(_el$13, createComponent(Show, {
+			get when() {
+				return memo(() => !!local.onDelete)() && !local.deleted;
+			},
+			get children() {
+				return createComponent(Button, {
+					variant: "ghost",
+					size: "2xs",
+					"class": "gap-1.5 text-muted-foreground",
+					onClick: () => local.onDelete?.(),
+					get children() {
+						return [createComponent(Trash2, {}), "Delete"];
+					}
+				});
+			}
+		}), null);
+		insert(_el$13, createComponent(Show, {
+			get when() {
+				return local.onRetry;
+			},
+			get children() {
+				return createComponent(Button, {
+					variant: "ghost",
+					size: "2xs",
+					"class": "gap-1.5 text-muted-foreground",
+					onClick: () => local.onRetry?.(),
+					get children() {
+						return [createComponent(RotateCcw, {}), "Retry"];
+					}
+				});
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$ = cn("mt-0.5", mirrored() ? "order-2" : "order-1"), _v$2 = cn("flex min-w-0 flex-col gap-1", mirrored() ? "order-1" : "order-2"), _v$3 = cn("relative w-fit min-w-16 max-w-[min(100%,38rem)] rounded-lg border border-border px-3.5 pt-2.5 pb-2", "bg-card text-card-foreground", mirrored() ? "rounded-ee-sm ms-auto" : "rounded-es-sm"), _v$4 = cn("flex items-center gap-1 opacity-0 transition-opacity ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100", mirrored() && "justify-end");
+			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$13, _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+}
+/**
+* A run of messages from the same speaker.
+*
+* Consecutive turns from one voice are a *paragraph*, and a transcript that repeats
+* the avatar and the name for each line reads as noise. The group draws the first
+* row fully and the rest without their avatar.
+*/
+function MessageGroup(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$15 = _tmpl$0();
+		spread(_el$15, mergeProps({ get ["class"]() {
+			return cn("flex flex-col", local.class);
+		} }, rest), false, true);
+		insert(_el$15, () => local.children);
+		return _el$15;
+	})();
+}
+/** A day divider, so a long transcript has somewhere to rest the eye. */
+function MessageDayDivider(props) {
+	const [local, rest] = splitProps(props, ["class", "label"]);
+	return (() => {
+		var _el$16 = _tmpl$1(), _el$18 = _el$16.firstChild.nextSibling;
+		spread(_el$16, mergeProps({ get ["class"]() {
+			return cn("flex items-center gap-3 px-4 py-3", local.class);
+		} }, rest), false, true);
+		insert(_el$18, () => local.label);
+		return _el$16;
+	})();
+}
+/**
+* Renders a body's code fences as blocks, which a plain `<p>` cannot.
+*
+* The fence grammar is the part worth owning: a fence opens with ``` and an
+* optional language, and closes with ``` on its own. Everything outside a fence
+* is prose, and inside it the language tag belongs to the block's header rather
+* than to the code.
+*
+* Inline code — a single backtick pair inside a line — is rendered too, because
+* the alternative is an identifier in the prose that is indistinguishable from a
+* word. Only the *first* pair on a line is treated as code by the splitter here,
+* which is the common case; a caller that needs full inline grammar should pass
+* already-rendered children instead of `text`.
+*/
+function MessageBody(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"text",
+		"streaming"
+	]);
+	/**
+	* Split on fences, then on inline code. `filter(Boolean)` because a text that
+	* begins with a fence produces an empty leading segment.
+	*/
+	const segments = () => local.text.split(/(```[\s\S]*?(?:```|$))/g).filter(Boolean).map((segment) => {
+		if (!segment.startsWith("```")) return {
+			kind: "prose",
+			value: segment
+		};
+		const body = segment.replace(/^```/, "").replace(/```$/, "");
+		const newline = body.indexOf("\n");
+		const firstLine = newline === -1 ? "" : body.slice(0, newline);
+		const language = /^[\w+#.-]+$/.test(firstLine.trim()) ? firstLine.trim() : void 0;
+		return {
+			kind: "code",
+			value: language ? body.slice(newline + 1) : body,
+			language
+		};
+	});
+	const last = () => segments().at(-1);
+	return (() => {
+		var _el$19 = _tmpl$11();
+		spread(_el$19, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-2", local.class);
+		} }, rest), false, true);
+		insert(_el$19, createComponent(For, {
+			get each() {
+				return segments();
+			},
+			children: (segment) => createComponent(Show, {
+				get when() {
+					return segment.kind === "code";
+				},
+				get fallback() {
+					return createComponent(Prose, { get text() {
+						return segment.value;
+					} });
+				},
+				get children() {
+					return createComponent(CodeBlock, {
+						get code() {
+							return segment.value;
+						},
+						get language() {
+							return memo(() => segment.kind === "code")() ? segment.language : void 0;
+						},
+						get complete() {
+							return !local.streaming;
+						}
+					});
+				}
+			})
+		}), null);
+		insert(_el$19, createComponent(Show, {
+			get when() {
+				return memo(() => !!local.streaming)() && last()?.kind === "prose";
+			},
+			get children() {
+				return _tmpl$10();
+			}
+		}), null);
+		return _el$19;
+	})();
+}
+/**
+* A run of prose, with its inline code marked. The split is non-greedy and
+* requires a non-empty span, so an unmatched backtick stays a backtick rather
+* than swallowing the rest of the paragraph.
+*/
+function Prose(props) {
+	const parts = () => props.text.split(/(`[^`\n]+`)/g).filter(Boolean);
+	return (() => {
+		var _el$21 = _tmpl$12();
+		insert(_el$21, createComponent(For, {
+			get each() {
+				return parts();
+			},
+			children: (part) => createComponent(Show, {
+				get when() {
+					return memo(() => !!(part.startsWith("`") && part.endsWith("`")))() && part.length > 2;
+				},
+				fallback: part,
+				get children() {
+					return createComponent(InlineCode, { get children() {
+						return part.slice(1, -1);
+					} });
+				}
+			})
+		}));
+		return _el$21;
+	})();
+}
+//#endregion
+export { MessageBody, MessageDayDivider, MessageGroup, MessageRow };
+
+//# sourceMappingURL=message-row.js.map

package/dist/components/conversation/message-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-row.js","names":["CheckCheck","MessageSquareReply","Pencil","RotateCcw","Trash2","ComponentProps","JSX","For","Show","splitProps","cn","Button","CodeBlock","InlineCode","ConversationAvatar","ConversationAvatarKind","MessageRowProps","Omit","senderKind","senderName","time","dateTime","edited","pending","streaming","deleted","highlighted","avatar","Element","attachments","link","actions","onOpenThread","onThreadIntent","onEdit","onDelete","onRetry","MessageRow","props","local","rest","mirrored","_el$","_tmpl$8","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_el$9","_el$13","_$spread","_$mergeProps","data-message-kind","aria-busy","undefined","tabindex","class","_$insert","_$createComponent","kind","size","children","when","fallback","_tmpl$9","_el$7","_tmpl$","_el$8","_tmpl$2","_el$0","_tmpl$3","_$effect","_$setAttribute","_tmpl$4","_tmpl$5","_tmpl$6","_$memo","_el$12","_tmpl$7","variant","onClick","onPointerEnter","onFocus","_p$","_v$","_v$2","_v$3","_v$4","e","_$className","t","a","o","MessageGroup","_el$15","_tmpl$0","MessageDayDivider","label","_el$16","_tmpl$1","_el$17","_el$18","MessageBody","text","segments","split","filter","Boolean","map","segment","startsWith","const","value","body","replace","newline","indexOf","firstLine","slice","language","test","trim","last","at","_el$19","_tmpl$11","each","Prose","code","complete","_tmpl$10","parts","_el$21","_tmpl$12","part","endsWith","length","_$mergeProps","_$createComponent","_$setAttribute","_$memo","_$className"],"sources":["../../../src/components/conversation/message-row.tsx"],"sourcesContent":["import { CheckCheck, MessageSquareReply, Pencil, RotateCcw, Trash2 } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\nimport { CodeBlock, InlineCode } from '../ui/code-block'\nimport { ConversationAvatar, type ConversationAvatarKind } from './conversation-avatar'\n\n/**\n * MessageRow.\n *\n * One turn in a transcript: a speaker, a bubble, and the actions that apply to it.\n *\n * ## What it does not know\n *\n * It takes no domain types. A caller supplies the speaker's name, the timestamp, and\n * the body as children; attachments, a linked task and the action row are slots. That\n * is deliberate and it is the difference between a component a second application can\n * use and one that only fits the application it was written in — the first version of\n * this row was written against adea's message model and could not have been used by\n * cortana at all.\n *\n * ## The two things it does know\n *\n * **The speaker's own messages mirror.** A user's turn puts the avatar on the trailing\n * edge and the bubble on the leading one, so a transcript can be read as a\n * conversation rather than as a log. `senderKind` decides that, and it is the only\n * place the layout branches.\n *\n * **`content-visibility: auto`.** A transcript is the one list in an application that\n * can hold thousands of rows, and this lets the engine skip layout and paint for the\n * ones off screen. `contain-intrinsic-size` is what keeps the scrollbar honest while\n * it does — without it the scroll height collapses as rows are skipped and the\n * thumb jumps. Both are load-bearing rather than an optimisation to add later.\n */\nexport type MessageRowProps = Omit<ComponentProps<'article'>, 'onSelect'> & {\n  /** Who spoke. Decides the mirroring and the avatar's tone. */\n  senderKind: ConversationAvatarKind\n  /** The speaker's name, announced with the message rather than drawn. */\n  senderName: string\n  /** An ISO timestamp, rendered by the caller's own formatter. */\n  time?: string\n  /** The machine-readable time, for `<time datetime>`. */\n  dateTime?: string\n  /** Set when the message has been edited after sending. */\n  edited?: boolean\n  /** Set while the message is in flight. */\n  pending?: boolean\n  /**\n   * Set while tokens are still arriving. Shows a caret after the body and drops\n   * the delivered tick; distinct from `pending`, which is the *sending* state of\n   * a message the user wrote. A turn can be neither, either, or (briefly) both.\n   */\n  streaming?: boolean\n  /** Set when the message has been deleted, which replaces the body. */\n  deleted?: boolean\n  /** Draw attention to this row, e.g. after arriving from a search result. */\n  highlighted?: boolean\n  /** The caller's own avatar content. Falls back to a glyph for the kind. */\n  avatar?: JSX.Element\n  /** Attachments, rendered under the body. */\n  attachments?: JSX.Element\n  /** A linked entity — a task, an artifact, a session — rendered under the body. */\n  link?: JSX.Element\n  /** Extra rows in the action strip, before the built-in ones. */\n  actions?: JSX.Element\n  /** Show the reply affordance. Omit it to hide the action. */\n  onOpenThread?: () => void\n  /** Fires on hover and focus of the reply affordance, for prefetching. */\n  onThreadIntent?: () => void\n  onEdit?: () => void\n  onDelete?: () => void\n  onRetry?: () => void\n}\n\nexport function MessageRow(props: MessageRowProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'senderKind',\n    'senderName',\n    'time',\n    'dateTime',\n    'edited',\n    'pending',\n    'streaming',\n    'deleted',\n    'highlighted',\n    'avatar',\n    'attachments',\n    'link',\n    'actions',\n    'onOpenThread',\n    'onThreadIntent',\n    'onEdit',\n    'onDelete',\n    'onRetry',\n    'children',\n  ])\n\n  const mirrored = () => local.senderKind === 'user'\n\n  return (\n    <article\n      data-slot=\"message-row\"\n      data-message-kind={local.senderKind}\n      aria-busy={local.pending || undefined}\n      tabindex={local.highlighted ? -1 : undefined}\n      class={cn(\n        'group/message grid max-w-3xl gap-2.5 px-1 py-1.5',\n        /* The row is skipped by the engine while off screen; the intrinsic size keeps\n           the scroll height stable while that happens. */\n        '[content-visibility:auto] [contain-intrinsic-size:auto_7rem]',\n        mirrored() ? 'grid-cols-[minmax(0,1fr)_2rem]' : 'grid-cols-[1.9rem_minmax(0,1fr)]',\n        'transition-colors ease-out hover:bg-muted/45',\n        local.highlighted && 'bg-primary-subtle shadow-[inset_3px_0_var(--primary)]',\n        local.class\n      )}\n      {...rest}\n    >\n      <span data-slot=\"message-avatar\" class={cn('mt-0.5', mirrored() ? 'order-2' : 'order-1')}>\n        <ConversationAvatar kind={local.senderKind} size={mirrored() ? 'lg' : 'md'}>\n          {local.avatar}\n        </ConversationAvatar>\n      </span>\n\n      <div\n        data-slot=\"message-content\"\n        class={cn('flex min-w-0 flex-col gap-1', mirrored() ? 'order-1' : 'order-2')}\n      >\n        <div\n          data-slot=\"message-bubble\"\n          class={cn(\n            'relative w-fit min-w-16 max-w-[min(100%,38rem)] rounded-lg border border-border px-3.5 pt-2.5 pb-2',\n            'bg-card text-card-foreground',\n            /* The tail: a squared corner on the side the speaker sits, which is what\n               makes a bubble read as belonging to one voice. */\n            mirrored() ? 'rounded-ee-sm ms-auto' : 'rounded-es-sm'\n          )}\n        >\n          {/* The name is announced with the message rather than drawn: a transcript\n              that repeats every speaker's name in every bubble is one nobody reads. */}\n          <span class=\"visually-hidden\">{local.senderName}</span>\n\n          <div data-slot=\"message-body\" class=\"text-sm\">\n            <Show\n              when={!local.deleted}\n              fallback={<p class=\"text-muted-foreground italic\">Message deleted</p>}\n            >\n              {local.children}\n            </Show>\n          </div>\n\n          <Show when={local.attachments}>\n            <div class=\"mt-2 flex flex-wrap gap-2\">{local.attachments}</div>\n          </Show>\n\n          <Show when={local.link}>\n            <div class=\"mt-2\">{local.link}</div>\n          </Show>\n\n          <div\n            data-slot=\"message-meta\"\n            class=\"mt-1 flex items-center gap-2 text-2xs text-muted-foreground\"\n          >\n            <Show when={local.time}>\n              <time datetime={local.dateTime}>{local.time}</time>\n            </Show>\n            <Show when={local.edited}>\n              <span>edited</span>\n            </Show>\n            <Show when={local.pending}>\n              <span role=\"status\">sending…</span>\n            </Show>\n            <Show when={local.streaming}>\n              <span role=\"status\">responding…</span>\n            </Show>\n            <Show when={mirrored() && !local.pending && !local.streaming && !local.deleted}>\n              {/*\n                `role=\"img\"` because a bare span cannot carry `aria-label` — axe's\n                `aria-prohibited-attr`. The glyph is the whole message, so the role\n                is also the accurate one: this element *is* an image whose meaning\n                is its label.\n              */}\n              <span role=\"img\" aria-label=\"Delivered\" class=\"inline-flex\">\n                <CheckCheck aria-hidden=\"true\" class=\"size-3\" />\n              </span>\n            </Show>\n          </div>\n        </div>\n\n        {/* The action strip is hidden until the row is hovered or focused, so a\n            transcript is not a wall of buttons — but it stays in the accessibility\n            tree and the tab order, because a control that only exists under the\n            pointer cannot be reached by keyboard. */}\n        <footer\n          data-slot=\"message-actions\"\n          class={cn(\n            'flex items-center gap-1 opacity-0 transition-opacity ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100',\n            mirrored() && 'justify-end'\n          )}\n        >\n          <Show when={local.actions}>{local.actions}</Show>\n          <Show when={local.onOpenThread && !local.deleted}>\n            <Button\n              variant=\"ghost\"\n              size=\"2xs\"\n              class=\"gap-1.5 text-muted-foreground\"\n              onClick={() => local.onOpenThread?.()}\n              onPointerEnter={() => local.onThreadIntent?.()}\n              onFocus={() => local.onThreadIntent?.()}\n            >\n              <MessageSquareReply />\n              Thread\n            </Button>\n          </Show>\n          <Show when={local.onEdit && !local.deleted}>\n            <Button\n              variant=\"ghost\"\n              size=\"2xs\"\n              class=\"gap-1.5 text-muted-foreground\"\n              onClick={() => local.onEdit?.()}\n            >\n              <Pencil />\n              Edit\n            </Button>\n          </Show>\n          <Show when={local.onDelete && !local.deleted}>\n            <Button\n              variant=\"ghost\"\n              size=\"2xs\"\n              class=\"gap-1.5 text-muted-foreground\"\n              onClick={() => local.onDelete?.()}\n            >\n              <Trash2 />\n              Delete\n            </Button>\n          </Show>\n          <Show when={local.onRetry}>\n            <Button\n              variant=\"ghost\"\n              size=\"2xs\"\n              class=\"gap-1.5 text-muted-foreground\"\n              onClick={() => local.onRetry?.()}\n            >\n              <RotateCcw />\n              Retry\n            </Button>\n          </Show>\n        </footer>\n      </div>\n    </article>\n  )\n}\n\n/**\n * A run of messages from the same speaker.\n *\n * Consecutive turns from one voice are a *paragraph*, and a transcript that repeats\n * the avatar and the name for each line reads as noise. The group draws the first\n * row fully and the rest without their avatar.\n */\nexport function MessageGroup(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <div data-slot=\"message-group\" role=\"group\" class={cn('flex flex-col', local.class)} {...rest}>\n      {local.children}\n    </div>\n  )\n}\n\n/** A day divider, so a long transcript has somewhere to rest the eye. */\nexport function MessageDayDivider(props: ComponentProps<'div'> & { label: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label'])\n  return (\n    <div\n      data-slot=\"message-day-divider\"\n      role=\"separator\"\n      class={cn('flex items-center gap-3 px-4 py-3', local.class)}\n      {...rest}\n    >\n      <span class=\"h-px flex-1 bg-border\" />\n      <span class=\"text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n        {local.label}\n      </span>\n      <span class=\"h-px flex-1 bg-border\" />\n    </div>\n  )\n}\n\n/**\n * Renders a body's code fences as blocks, which a plain `<p>` cannot.\n *\n * The fence grammar is the part worth owning: a fence opens with ``` and an\n * optional language, and closes with ``` on its own. Everything outside a fence\n * is prose, and inside it the language tag belongs to the block's header rather\n * than to the code.\n *\n * Inline code — a single backtick pair inside a line — is rendered too, because\n * the alternative is an identifier in the prose that is indistinguishable from a\n * word. Only the *first* pair on a line is treated as code by the splitter here,\n * which is the common case; a caller that needs full inline grammar should pass\n * already-rendered children instead of `text`.\n */\nexport function MessageBody(\n  props: ComponentProps<'div'> & {\n    text: string\n    /** True while the turn is still streaming, so a partial fence renders as a block. */\n    streaming?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'text', 'streaming'])\n\n  /**\n   * Split on fences, then on inline code. `filter(Boolean)` because a text that\n   * begins with a fence produces an empty leading segment.\n   */\n  const segments = () =>\n    local.text\n      .split(/(```[\\s\\S]*?(?:```|$))/g)\n      .filter(Boolean)\n      .map((segment) => {\n        if (!segment.startsWith('```')) {\n          return { kind: 'prose' as const, value: segment }\n        }\n        const body = segment.replace(/^```/, '').replace(/```$/, '')\n        // The language is the first token on the opening line, and only when the\n        // fence actually carried one — a fence with a bare newline has none.\n        const newline = body.indexOf('\\n')\n        const firstLine = newline === -1 ? '' : body.slice(0, newline)\n        const language = /^[\\w+#.-]+$/.test(firstLine.trim()) ? firstLine.trim() : undefined\n        return {\n          kind: 'code' as const,\n          value: language ? body.slice(newline + 1) : body,\n          language,\n        }\n      })\n\n  const last = () => segments().at(-1)\n\n  return (\n    <div data-slot=\"message-body\" class={cn('flex flex-col gap-2', local.class)} {...rest}>\n      <For each={segments()}>\n        {(segment) => (\n          <Show when={segment.kind === 'code'} fallback={<Prose text={segment.value} />}>\n            <CodeBlock\n              code={segment.value}\n              language={segment.kind === 'code' ? segment.language : undefined}\n              complete={!local.streaming}\n            />\n          </Show>\n        )}\n      </For>\n      {/*\n        The caret trails the last segment, and only when that segment is prose: a\n        streaming code block already carries its own generating indicator, and two\n        of them on one turn read as two streams.\n      */}\n      <Show when={local.streaming && last()?.kind === 'prose'}>\n        <span class=\"streaming-caret\" aria-hidden=\"true\" />\n      </Show>\n    </div>\n  )\n}\n\n/**\n * A run of prose, with its inline code marked. The split is non-greedy and\n * requires a non-empty span, so an unmatched backtick stays a backtick rather\n * than swallowing the rest of the paragraph.\n */\nfunction Prose(props: { text: string }) {\n  const parts = () => props.text.split(/(`[^`\\n]+`)/g).filter(Boolean)\n\n  return (\n    <p class=\"whitespace-pre-wrap\">\n      <For each={parts()}>\n        {(part) => (\n          <Show\n            when={part.startsWith('`') && part.endsWith('`') && part.length > 2}\n            fallback={part}\n          >\n            <InlineCode>{part.slice(1, -1)}</InlineCode>\n          </Show>\n        )}\n      </For>\n    </p>\n  )\n}\n"],"mappings":"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"}

package/dist/components/conversation/thread-panel.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentProps, JSX } from 'solid-js';
+/**
+ * ThreadPanel.
+ *
+ * The replies to one message, shown beside the transcript rather than in it. Keeping
+ * a thread out of the main flow is what stops a busy side conversation from burying
+ * the conversation everyone is having.
+ *
+ * The root message is repeated at the top — with `pinned` — because a thread read out
+ * of context is a set of answers to a question the reader can no longer see.
+ *
+ * The panel is a `complementary` landmark with a label, so it is reachable by
+ * landmark navigation rather than by tabbing through the transcript to find it.
+ */
+export type ThreadPanelProps = ComponentProps<'aside'> & {
+    /** The thread's title, usually the root message's author. */
+    label: string;
+    /** A count of replies, shown beside the label. */
+    count?: number;
+    /** The root message, drawn above the replies. */
+    root?: JSX.Element;
+    /** The composer for a reply. */
+    composer?: JSX.Element;
+    onClose?: () => void;
+};
+export declare function ThreadPanel(props: ThreadPanelProps): JSX.Element;
+/**
+ * An attachment card.
+ *
+ * A file is not a link: the reader wants to know what it is and how big it is before
+ * deciding to open it, so the media type and size are on the card rather than behind
+ * a click. `unavailable` is a real state — an artifact can be deleted, or live on a
+ * device this one is not authorized for — and it is drawn as text rather than as a
+ * dead link.
+ */
+export type AttachmentCardProps = ComponentProps<'button'> & {
+    name: string;
+    /** A short description of the type and size, e.g. "image/png · 24,120 bytes". */
+    detail?: string;
+    /** Draw the card as unavailable, with the reason as the detail. */
+    unavailable?: boolean;
+    icon?: JSX.Element;
+};
+export declare function AttachmentCard(props: AttachmentCardProps): JSX.Element;
+//# sourceMappingURL=thread-panel.d.ts.map

package/dist/components/conversation/thread-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thread-panel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/thread-panel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA6DlD;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eA4BxD"}