Chat Patterns
Page Chat
Centered page chat with a constrained message column and footer composer. Use for primary assistant experiences where the conversation is the main task and needs persistent input.
<nve-page>
<nve-page-header slot="header">
<nve-logo slot="prefix" size="sm" color="brand-green">AI</nve-logo>
<h1 slot="prefix" nve-text="heading sm">Assistant</h1>
</nve-page-header>
<nve-page-panel slot="subheader">
<nve-page-panel-content>
<h2 nve-text="heading sm">Deployment risk review</h2>
</nve-page-panel-content>
</nve-page-panel>
<main nve-layout="column pad:lg align:horizontal-center">
<section nve-layout="column gap:lg align:horizontal-stretch" aria-live="polite" aria-relevant="additions text" style="max-width: 520px; margin: 0 auto">
<nve-chat-message aria-label="user message" arrow-position="top-end" style="margin-inline-start: auto; max-width: 80%">
<nve-avatar slot="suffix" color="brand-green">NV</nve-avatar>
Summarize the deployment risk for the new inference endpoint.
</nve-chat-message>
<nve-chat-message aria-label="assistant message" arrow-position="top-start" style="max-width: 80%">
<nve-avatar slot="prefix" color="gray-denim">AI</nve-avatar>
The highest risk is the cold-start latency on the first request after scale-out. Keep the rollout limited to the staging pool until p95 startup time stays below the service target for three consecutive runs.
</nve-chat-message>
<nve-chat-message aria-label="user message" arrow-position="top-end" style="margin-inline-start: auto; max-width: 80%">
<nve-avatar slot="suffix" color="brand-green">NV</nve-avatar>
What should the operator check first?
</nve-chat-message>
</section>
</main>
<form slot="footer" nve-layout="column gap:sm full pad:md" style="max-width: 520px; margin: 0 auto">
<nve-textarea container="flat">
<textarea aria-label="Message Agent" name="message" rows="3" maxlength="4000" placeholder="Ask about this deployment"></textarea>
<nve-tag slot="prefix" color="gray-denim" closable>AGENTS.md</nve-tag>
<nve-tag slot="prefix" color="gray-denim" closable>Web Search</nve-tag>
<nve-icon-button slot="suffix" type="button" icon-name="paper-clip" container="flat" aria-label="Attach file"></nve-icon-button>
<nve-icon-button slot="suffix" type="button" icon-name="paper-airplane" style="margin-left: auto" aria-label="Send message"></nve-icon-button>
</nve-textarea>
</form>
</nve-page>
AI Assistant
Deployment risk review
NV Summarize the deployment risk for the new inference endpoint. AI The highest risk is the cold-start latency on the first request after scale-out. Keep the rollout limited to the staging pool until p95 startup time stays below the service target for three consecutive runs. NV What should the operator check first? Panel Chat
Right-side chat panel with persistent header, scrollable transcript, and footer composer. Use when chat supports a larger workspace without taking over the main content.
<nve-page>
<nve-page-header slot="header">
<nve-logo slot="prefix" size="sm" color="brand-green">AI</nve-logo>
<h1 slot="prefix" nve-text="heading sm">Prompt API Chat</h1>
</nve-page-header>
<main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
<section nve-layout="column gap:md" style="max-width: 900px">
<h2 nve-text="heading">Model deployment</h2>
<p nve-text="body">Keep the assistant available while operators inspect logs, metrics, and deployment details in the main workspace.</p>
</section>
</main>
<nve-page-panel id="chat-panel" slot="right" aria-labelledby="chat-title">
<nve-page-panel-header>
<h2 id="chat-title" nve-text="heading sm">Assistant</h2>
</nve-page-panel-header>
<nve-page-panel-content>
<section nve-layout="column gap:lg align:horizontal-stretch" aria-live="polite" aria-relevant="additions text" style="margin-inline-start: auto">
<nve-chat-message aria-label="user message" arrow-position="top-end" color="brand-green" style="margin-inline-start: auto"> How does the nve-badge work? </nve-chat-message>
<nve-chat-message aria-label="assistant message" arrow-position="top-start">
The badge communicates short status, count, or label information next to related content. Use status values when the badge describes system state and color values when it needs to match a broader visual
category.
</nve-chat-message>
</section>
</nve-page-panel-content>
<nve-page-panel-footer>
<form nve-layout="column gap:sm full">
<nve-textarea container="flat">
<textarea aria-label="Message Agent" name="message" rows="3" maxlength="4000" placeholder="Ask about NVIDIA Elements"></textarea>
<nve-icon-button slot="suffix" type="button" icon-name="paper-clip" container="flat" aria-label="Attach file"></nve-icon-button>
<nve-icon-button slot="suffix" type="button" icon-name="paper-airplane" style="margin-left: auto" aria-label="Send message"></nve-icon-button>
</nve-textarea>
</form>
</nve-page-panel-footer>
</nve-page-panel>
</nve-page>
AI Prompt API Chat
Model deployment
Keep the assistant available while operators inspect logs, metrics, and deployment details in the main workspace.
Assistant
How does the nve-badge work? The badge communicates short status, count, or label information next to related content. Use status values when the badge describes system state and color values when it needs to match a broader visual category.
Popover Chat
Bottom-right anchored chat dialog with launcher button. Use for optional contextual help or assistant support that should stay available without changing the page layout.
<nve-icon-button
id="chat-launcher"
popovertarget="chat-popover"
interaction="emphasis"
icon-name="chat-bubble"
size="lg"
aria-label="Open assistant"
style="position: fixed; inset-block-end: var(--nve-ref-space-xl); inset-inline-end: var(--nve-ref-space-xl); z-index: 100"
></nve-icon-button>
<nve-dialog id="chat-popover" anchor="chat-launcher" position="top" alignment="end" size="sm" closable style="--max-width: 320px; --min-height: 340px; margin: var(--nve-ref-space-sm)">
<nve-dialog-header>
<h2 nve-text="heading sm">Assistant</h2>
</nve-dialog-header>
<section nve-layout="column gap:md full" aria-live="polite" aria-relevant="additions text">
<nve-chat-message aria-label="assistant message" arrow-position="top-start"> I can help compare alerts, explain metrics, or draft a remediation checklist. </nve-chat-message>
<nve-chat-message aria-label="user message" arrow-position="top-end" color="brand-green" style="margin-inline-start: auto"> Why did the deployment pause? </nve-chat-message>
<nve-chat-message aria-label="assistant message" arrow-position="top-start"> The canary paused because error rate exceeded the threshold for two consecutive windows. </nve-chat-message>
</section>
<nve-dialog-footer>
<form nve-layout="column gap:sm full">
<nve-textarea>
<textarea aria-label="Message Agent" name="message" rows="3" maxlength="4000" placeholder="Ask for help"></textarea>
<nve-icon-button slot="suffix" type="button" icon-name="paper-clip" container="flat" aria-label="Attach file"></nve-icon-button>
<nve-icon-button slot="suffix" type="button" icon-name="paper-airplane" style="margin-left: auto" aria-label="Send message"></nve-icon-button>
</nve-textarea>
</form>
</nve-dialog-footer>
</nve-dialog>
<script type="module">
await customElements.whenDefined("nve-dialog");
const dialog = document.querySelector("#chat-popover");
const launcher = document.querySelector("#chat-launcher");
if (dialog && launcher && !dialog.matches(":popover-open")) {
dialog.showPopover({ source: launcher });
}
</script>
Streaming Content
Progressive AI response streaming with a restart action. Use to replay content from the beginning and inspect how markdown renders as new blocks arrive.
<div nve-layout="column gap:md">
<div>
<nve-button id="restart-markdown-stream" type="button">Restart stream</nve-button>
</div>
<nve-markdown id="programmatic-markdown"></nve-markdown>
<script type="module">
const element = document.getElementById("programmatic-markdown");
// Complete markdown content to stream
const fullContent = `# AI Assistant Response
\n
Thank you for your question about **markdown streaming**. Here's how it works:
\n
## Key Features
\n
- **Real-time parsing** as content arrives
- *Progressive* rendering updates
- Smooth user experience
- Dynamic content handling
\n
### Implementation Example
\n
\`\`\`javascript
const element = document.getElementById('markdown');
element.source = streamingContent;
\`\`\`
\n
## How It Works
\n
The markdown component processes content incrementally, allowing for:
\n
1. **Streaming responses** from AI systems
2. **Live updates** without page refreshes
3. **Progressive enhancement** of content
\n
### Use Cases
\n
- Chat applications with AI assistants
- Real-time documentation generation
- Interactive tutorials and guides
- Live content editing interfaces
\n
## Technical Details
\n
The component uses a reactive approach:
\n
- Watches for \`source\` property changes
- Re-parses markdown on each update
- Maintains smooth rendering performance
- Handles both markdown and HTML content types
\n
### Performance Benefits
\n
- **Lazy loading** of markdown parser
- **Efficient re-rendering** with Lit's update cycle
- **Memory optimization** through proper cleanup
\n
> Perfect for AI assistants and real-time documentation!`;
// Split content into blocks/paragraphs for progressive display
const blocks = fullContent.split("\n");
let currentBlockIndex = 0;
let streamTimeout;
function streamContent() {
if (!element.isConnected) return;
if (currentBlockIndex < blocks.length) {
// Add 1 block at a time to preserve markdown structure
currentBlockIndex++;
const currentContent = blocks.slice(0, currentBlockIndex).join(" \n");
element.source = currentContent;
streamTimeout = setTimeout(streamContent, 300);
}
}
document.getElementById("restart-markdown-stream").addEventListener("click", () => {
clearTimeout(streamTimeout);
currentBlockIndex = 0;
element.source = "";
streamTimeout = setTimeout(streamContent, 300);
});
// Start streaming after a brief delay
streamTimeout = setTimeout(streamContent, 1000);
</script>
</div>