puter/zopu-code
1
0
Fork 0
Code Issues 3 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(web): integrate AI Elements chat primitives

Browse Source
This commit is contained in:
sai karthik
2026-07-23 17:41:16 +05:30
parent 3836d70704
commit 1d18ec1b32
19 changed files with 1987 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/design.mobile-chat.tsx
+65 -32
View File
@@ -1,3 +1,16 @@
import {
Conversation,
ConversationContent,
} from "@code/ui/components/ai-elements/conversation";
import {
Message,
MessageContent,
} from "@code/ui/components/ai-elements/message";
import {
Tool,
ToolContent,
ToolHeader,
} from "@code/ui/components/ai-elements/tool";
import {
MobileChatAssistantLabel,
MobileChatBubble,
@@ -21,39 +34,59 @@ export const meta = (_args: Route.MetaArgs) => [
const MobileChatShowcase = () => (
<section className="flex h-full min-h-0 flex-col bg-[#fefefe]">
<MobileChatHeader active statusLabel="Ready" />
<main className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-6">
<MobileChatMessage sender="user">
<MobileChatBubble sender="user">
Summarize Q3 and find recent AI news.
</MobileChatBubble>
</MobileChatMessage>
<Conversation className="ai-conversation-mobile min-h-0 flex-1">
<ConversationContent className="min-h-full w-full gap-0 px-4 pt-4 pb-6">
<Message className="max-w-full gap-0" from="user">
<MessageContent className="w-full max-w-none gap-0 overflow-visible rounded-none bg-transparent p-0 group-[.is-user]:rounded-none group-[.is-user]:bg-transparent group-[.is-user]:p-0">
<MobileChatMessage sender="user">
<MobileChatBubble sender="user">
Summarize Q3 and find recent AI news.
</MobileChatBubble>
</MobileChatMessage>
</MessageContent>
</Message>
<MobileChatMessage className="mt-5" sender="assistant">
<div className="w-full min-w-0">
<MobileChatAssistantLabel />
<MobileChatBubble sender="assistant">
<MobileChatToolCall
status="done"
tone="success"
toolName="Web Search"
>
<MobileChatToolResult
source="news.ycombinator.com"
title="AI funding hits record highs in 2026"
/>
<MobileChatToolResult
source="news.ycombinator.com"
title="Show HN: Series B raised for new AI lab"
/>
</MobileChatToolCall>
<p>
Revenue grew 18% QoQ to $4.2M. Top risks: customer concentration,
sales cycles, and infra costs.
</p>
</MobileChatBubble>
</div>
</MobileChatMessage>
</main>
<Message className="mt-5 max-w-full gap-0" from="assistant">
<MessageContent className="w-full max-w-none gap-0 overflow-visible p-0">
<MobileChatMessage sender="assistant">
<div className="w-full min-w-0">
<MobileChatAssistantLabel />
<MobileChatBubble sender="assistant">
<Tool className="mb-0 w-full border-0" defaultOpen>
<ToolHeader
className="sr-only"
state="output-available"
toolName="Web Search"
type="dynamic-tool"
/>
<ToolContent className="space-y-0 p-0">
<MobileChatToolCall
status="done"
tone="success"
toolName="Web Search"
>
<MobileChatToolResult
source="news.ycombinator.com"
title="AI funding hits record highs in 2026"
/>
<MobileChatToolResult
source="news.ycombinator.com"
title="Show HN: Series B raised for new AI lab"
/>
</MobileChatToolCall>
</ToolContent>
</Tool>
<p>
Revenue grew 18% QoQ to $4.2M. Top risks: customer
concentration, sales cycles, and infra costs.
</p>
</MobileChatBubble>
</div>
</MobileChatMessage>
</MessageContent>
</Message>
</ConversationContent>
</Conversation>
<MobileChatComposer
canSend