Skip to content

style: refine chat content and states #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jmagar wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style: refine chat content and states #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions catalog/inventory.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5456,7 +5456,7 @@
{
"id": "aurora-chat-block",
"title": "Aurora Interactive Chat",
"description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
"description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
"registryType": "registry:block",
"group": "Chat Primitives",
"categories": [
Expand Down Expand Up @@ -5487,10 +5487,13 @@
"@aurora/aurora-bubble",
"@aurora/aurora-chat-attachment",
"@aurora/aurora-marker",
"@aurora/aurora-callout",
"@aurora/aurora-empty-state",
"@aurora/aurora-code-block",
"@aurora/aurora-ai-snippet",
"@aurora/aurora-ai-sources",
"@aurora/aurora-ai-reasoning"
"@aurora/aurora-ai-reasoning",
"@aurora/aurora-ai-response"
],
"fixtureId": null,
"previewSlug": "chat-block",
Expand Down
2 changes: 1 addition & 1 deletion lib/client-catalog.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -588,7 +588,7 @@
"slug": "chat-block",
"label": "Interactive Chat",
"group": "Chat Primitives",
"description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
"description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
"registry": "aurora-chat-block",
"installUrl": "https://aurora.tootie.tv/r/aurora-chat-block.json"
},
Expand Down
2 changes: 1 addition & 1 deletion public/r/aurora-ai-inline-citation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"files": [
{
"path": "registry/aurora/blocks/ai/elements/inline-citation.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface InlineCitationProps\n extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** 1-based citation number rendered inside the chip. */\n index: number\n /** Source title shown in the hover/focus preview popover. */\n title?: string\n /** Optional context line shown below the title. */\n description?: string\n /** Source URL shown in the hover/focus preview popover. */\n url?: string\n}\n\n/**\n * InlineCitation — a compact rose citation chip rendered inline with body text.\n * When `title`/`url` are supplied it reveals a source preview on hover and\n * keyboard focus; otherwise it renders as a plain numbered chip.\n */\nconst InlineCitation = (\n { ref,\n className,\n index,\n title,\n description,\n url,\n style,\n children,\n href,\n target,\n rel,\n tabIndex,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n ...props\n }: InlineCitationProps & { ref?: React.Ref<HTMLAnchorElement> }\n ) => {\n const [open, setOpen] = React.useState(false)\n const resolvedHref = safeHttpUrl(href ?? url)\n const hasPreview = Boolean(title || description || url)\n const previewId = React.useId()\n const resolvedTarget = target ?? (resolvedHref ? \"_blank\" : undefined)\n const resolvedRel = rel ?? (resolvedHref ? \"noreferrer noopener\" : undefined)\n\n const handleMouseEnter = React.useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(true)\n onMouseEnter?.(event)\n },\n [hasPreview, onMouseEnter]\n )\n const handleMouseLeave = React.useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(false)\n onMouseLeave?.(event)\n },\n [hasPreview, onMouseLeave]\n )\n const handleFocus = React.useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(true)\n onFocus?.(event)\n },\n [hasPreview, onFocus]\n )\n const handleBlur = React.useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(false)\n onBlur?.(event)\n },\n [hasPreview, onBlur]\n )\n\n const chip = (\n <a\n ref={ref}\n className={[\n \"inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline\",\n \"border-[color:var(--aurora-citation-border)] bg-[var(--aurora-citation-bg)] transition-colors\",\n \"hover:border-[color:var(--aurora-citation-border-hover)] hover:bg-[var(--aurora-citation-bg-hover)]\",\n \"outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aurora-citation-ring)] focus-visible:ring-offset-0\",\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n href={resolvedHref}\n target={resolvedTarget}\n rel={resolvedRel}\n tabIndex={tabIndex ?? (hasPreview && !resolvedHref ? 0 : undefined)}\n aria-label={title ? `Citation ${index}: ${title}` : `Citation ${index}`}\n aria-describedby={hasPreview && open ? previewId : undefined}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onBlur={handleBlur}\n style={{\n minWidth: \"1.05rem\",\n padding: \"1px 5px\",\n [\"--aurora-citation-bg\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent)\",\n [\"--aurora-citation-bg-hover\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 20%, transparent)\",\n [\"--aurora-citation-border\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent)\",\n [\"--aurora-citation-border-hover\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 48%, transparent)\",\n [\"--aurora-citation-ring\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 45%, transparent)\",\n color: \"var(--aurora-accent-pink)\",\n fontFamily: \"var(--aurora-font-mono)\",\n fontSize: 11,\n fontWeight: 600,\n lineHeight: 1.45,\n ...style,\n }}\n {...props}\n >\n {children ?? index}\n </a>\n )\n\n if (!hasPreview) return chip\n\n return (\n <span\n className=\"relative inline-block align-baseline\"\n style={{ lineHeight: 0 }}\n >\n {chip}\n <span\n id={previewId}\n role=\"tooltip\"\n hidden={!open}\n className=\"absolute left-1/2 z-50 grid gap-1\"\n style={{\n bottom: \"calc(100% + 8px)\",\n transform: \"translateX(-50%)\",\n width: \"max-content\",\n maxWidth: 260,\n padding: \"10px 12px\",\n background: \"var(--aurora-surface-raised)\",\n border: \"1px solid var(--aurora-border-strong)\",\n borderRadius: \"var(--aurora-radius-1)\",\n boxShadow:\n \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n }}\n >\n {title ? (\n <span\n className=\"aurora-text-control\"\n style={{\n lineHeight: 1.35,\n color: \"var(--aurora-text-primary)\",\n }}\n >\n {title}\n </span>\n ) : null}\n {description ? (\n <span className=\"aurora-text-body-sm\" style={{ color: \"var(--aurora-text-muted)\" }}>\n {description}\n </span>\n ) : null}\n {url ? (\n <span\n className=\"aurora-text-meta\"\n style={{\n lineHeight: 1.4,\n color: \"var(--aurora-accent-pink)\",\n wordBreak: \"break-all\",\n }}\n >\n {url}\n </span>\n ) : null}\n </span>\n </span>\n )\n }\nInlineCitation.displayName = \"InlineCitation\"\n\nexport { InlineCitation }\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface InlineCitationProps\n extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** 1-based citation number rendered inside the chip. */\n index: number\n /** Source title shown in the hover/focus preview popover. */\n title?: string\n /** Optional context line shown below the title. */\n description?: string\n /** Source URL shown in the hover/focus preview popover. */\n url?: string\n}\n\n/**\n * InlineCitation — a compact rose citation chip rendered inline with body text.\n * When `title`/`url` are supplied it reveals a source preview on hover and\n * keyboard focus; otherwise it renders as a plain numbered chip.\n */\nconst InlineCitation = (\n { ref,\n className,\n index,\n title,\n description,\n url,\n style,\n children,\n href,\n target,\n rel,\n tabIndex,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n ...props\n }: InlineCitationProps & { ref?: React.Ref<HTMLAnchorElement> }\n ) => {\n const [open, setOpen] = React.useState(false)\n const resolvedHref = safeHttpUrl(href ?? url)\n const sourceHost = resolvedHref ? new URL(resolvedHref).hostname.replace(/^www\\./, \"\") : null\n const hasPreview = Boolean(title || description || url)\n const previewId = React.useId()\n const resolvedTarget = target ?? (resolvedHref ? \"_blank\" : undefined)\n const resolvedRel = rel ?? (resolvedHref ? \"noreferrer noopener\" : undefined)\n\n const handleMouseEnter = React.useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(true)\n onMouseEnter?.(event)\n },\n [hasPreview, onMouseEnter]\n )\n const handleMouseLeave = React.useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(false)\n onMouseLeave?.(event)\n },\n [hasPreview, onMouseLeave]\n )\n const handleFocus = React.useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(true)\n onFocus?.(event)\n },\n [hasPreview, onFocus]\n )\n const handleBlur = React.useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n if (hasPreview) setOpen(false)\n onBlur?.(event)\n },\n [hasPreview, onBlur]\n )\n\n const chip = (\n <a\n ref={ref}\n className={[\n \"inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline\",\n \"border-[color:var(--aurora-citation-border)] bg-[var(--aurora-citation-bg)] transition-colors\",\n \"hover:border-[color:var(--aurora-citation-border-hover)] hover:bg-[var(--aurora-citation-bg-hover)]\",\n \"outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aurora-citation-ring)] focus-visible:ring-offset-0\",\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n href={resolvedHref}\n target={resolvedTarget}\n rel={resolvedRel}\n tabIndex={tabIndex ?? (hasPreview && !resolvedHref ? 0 : undefined)}\n aria-label={title ? `Citation ${index}: ${title}` : `Citation ${index}`}\n aria-describedby={hasPreview && open ? previewId : undefined}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onBlur={handleBlur}\n style={{\n minWidth: \"1.05rem\",\n padding: \"1px 5px\",\n [\"--aurora-citation-bg\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent)\",\n [\"--aurora-citation-bg-hover\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 20%, transparent)\",\n [\"--aurora-citation-border\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent)\",\n [\"--aurora-citation-border-hover\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 48%, transparent)\",\n [\"--aurora-citation-ring\" as string]:\n \"color-mix(in srgb, var(--aurora-accent-pink) 45%, transparent)\",\n color: \"var(--aurora-accent-pink)\",\n fontFamily: \"var(--aurora-font-mono)\",\n fontSize: 11,\n fontWeight: 600,\n lineHeight: 1.45,\n ...style,\n }}\n {...props}\n >\n {children ?? index}\n </a>\n )\n\n if (!hasPreview) return chip\n\n return (\n <span\n className=\"relative inline-block align-baseline\"\n style={{ lineHeight: 0 }}\n >\n {chip}\n <span\n id={previewId}\n role=\"tooltip\"\n hidden={!open}\n className=\"absolute left-1/2 z-50 grid gap-1\"\n style={{\n bottom: \"calc(100% + 8px)\",\n transform: \"translateX(-50%)\",\n width: \"max-content\",\n maxWidth: 260,\n padding: \"10px 12px\",\n background: \"var(--aurora-surface-raised)\",\n border: \"1px solid var(--aurora-border-strong)\",\n borderRadius: \"var(--aurora-radius-1)\",\n boxShadow:\n \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n }}\n >\n {title ? (\n <span\n className=\"aurora-text-control\"\n style={{\n lineHeight: 1.35,\n color: \"var(--aurora-text-primary)\",\n }}\n >\n {title}\n </span>\n ) : null}\n {description ? (\n <span className=\"aurora-text-body-sm\" style={{ color: \"var(--aurora-text-muted)\" }}>\n {description}\n </span>\n ) : null}\n {sourceHost ? (\n <span className=\"aurora-text-meta inline-flex items-center gap-1\" style={{ lineHeight: 1.4, color: \"var(--aurora-accent-pink)\" }}>\n <span>{sourceHost}</span><span aria-hidden=\"true\">↗</span>\n </span>\n ) : null}\n </span>\n </span>\n )\n }\nInlineCitation.displayName = \"InlineCitation\"\n\nexport { InlineCitation }\n",
"type": "registry:component",
"target": "@components/aurora/ai/inline-citation.tsx"
}
Expand Down
2 changes: 1 addition & 1 deletion public/r/aurora-ai-response.json
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions public/r/aurora-chat-block.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/r/aurora-components.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions public/r/registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5561,14 +5561,14 @@
"name": "aurora-chat-block",
"type": "registry:block",
"title": "Aurora Interactive Chat",
"description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
"description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
"dependencies": ["lucide-react@^1.24.0"],
"registryDependencies": ["@aurora/aurora-tokens", "@aurora/aurora-components", "@aurora/aurora-button", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-select", "@aurora/aurora-message-scroller", "@aurora/aurora-message", "@aurora/aurora-bubble", "@aurora/aurora-chat-attachment", "@aurora/aurora-marker", "@aurora/aurora-code-block", "@aurora/aurora-ai-snippet", "@aurora/aurora-ai-sources", "@aurora/aurora-ai-reasoning"],
"registryDependencies": ["@aurora/aurora-tokens", "@aurora/aurora-components", "@aurora/aurora-button", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-select", "@aurora/aurora-message-scroller", "@aurora/aurora-message", "@aurora/aurora-bubble", "@aurora/aurora-chat-attachment", "@aurora/aurora-marker", "@aurora/aurora-callout", "@aurora/aurora-empty-state", "@aurora/aurora-code-block", "@aurora/aurora-ai-snippet", "@aurora/aurora-ai-sources", "@aurora/aurora-ai-reasoning", "@aurora/aurora-ai-response"],
"files": [{ "path": "registry/aurora/blocks/ai/chat/chat.tsx", "type": "registry:component", "target": "@components/aurora/chat-block.tsx" }],
"author": "jmagar <https://github.com/jmagar>",
"categories": ["aurora", "block", "ai", "chat", "application"],
"meta": { "namespace": "@aurora", "style": "aurora", "family": "block", "requiresTokens": true, "sourcePath": "registry/aurora/blocks/ai/chat/chat.tsx", "installTarget": "@components/aurora/chat-block.tsx", "taxonomy": "ai" },
"docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, sources/references, compact reasoning disclosure, animated mock attachment lifecycle, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning."
"docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, inline markdown/citations, sources/references, compact reasoning disclosure, polished attachment preview/lifecycle, empty and recoverable error states, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-callout, aurora-empty-state, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning, aurora-ai-response."
},
{
"name": "aurora-chat-message",
Expand Down
Loading
Loading