AI chat: persona header, suggestion chips, typing indicator, working composer
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import { Image, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
useAnimatedStyle,
useSharedValue,
withDelay,
withRepeat,
withTiming,
} from "react-native-reanimated";
import { Button, Icon, Input, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic, useReducedMotion } from "@lumioui/core";
import { LumioBot, Mount, Press } from "../shared";
interface Message {
id: number;
role: "user" | "ai";
text: string;
/** Image replies (the "Create an image" action) carry thumbnails. */
images?: string[];
}
export interface AiAssistantScreenProps {
name?: string;
tagline?: string;
actions?: { title: string; icon: IconName; images?: string[] }[];
replies?: Record<string, string>;
onSend?: (text: string) => void;
onBack?: () => void;
}
/** The ChatGPT-idiom action rail: three hairline-separated rows, each
* a capability the assistant can demonstrate. */
const ACTIONS: { title: string; icon: IconName; images?: string[] }[] = [
{ title: "Start a voice chat", icon: "mic" },
{
title: "Create an image",
icon: "image",
images: [
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=240&h=180&fit=crop&q=80",
"https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=240&h=180&fit=crop&q=80",
"https://images.unsplash.com/photo-1620121692029-d088224ddc74?w=240&h=180&fit=crop&q=80",
],
},
{ title: "Write or edit", icon: "edit" },
];
const REPLIES: Record<string, string> = {
"Start a voice chat":
"Voice is on — I'm listening. Ask me to plan, summarize or draft anything out loud.",
"Create an image":
"Here's a direction — warm gradient glass, three variations. Say the word and I'll push it further.",
"Write or edit":
"Send me the draft — I'll tighten the copy, fix the rhythm, and keep your voice.",
};
const FALLBACK =
"Got it — here's a starting point. Pick an action below or ask me something specific and I'll go deeper.";
/** Next-step chips after each reply — follow-ups ride up over the
* composer so the thread never dead-ends. */
const FOLLOW_UPS: Record<string, string[]> = {
"Start a voice chat": ["Transcribe this", "Change my voice", "Mute"],
"Create an image": ["More variations", "Higher contrast", "Square crop"],
"Write or edit": ["Make it shorter", "More formal", "Add emojis"],
};
const GENERIC_FOLLOW_UPS = ["Tell me more", "Try another angle", "Make it shorter"];
/** AI assistant chat — the ChatGPT idiom: wordmark header, a quiet
* capability rail (voice / image / write), plain-text replies with an
* occasional media strip, and the Ask pill pinned at the bottom. */
export function AiAssistantScreen({
name = "Lumio",
tagline = "Ask anything — voice, images or writing.",
actions = ACTIONS,
replies = REPLIES,
onSend,
onBack,
}: AiAssistantScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [messages, setMessages] = useState<Message[]>([]);
const [composerH, setComposerH] = useState(0);
const [draft, setDraft] = useState("");
const [typing, setTyping] = useState(false);
const nextId = useRef(0);
const scrollRef = useRef<ScrollView>(null);
const send = (text: string, images?: string[]) => {
const clean = text.trim();
if (!clean) return;
haptics.light();
setMessages((m) => [...m, { id: nextId.current++, role: "user", text: clean, images }]);
setDraft("");
setTyping(true);
onSend?.(clean);
scrollRef.current?.scrollToEnd({ animated: true });
};
// Canned reply after a short "thinking" beat — makes the demo feel live.
useEffect(() => {
if (!typing) return;
const last = messages[messages.length - 1];
if (!last || last.role !== "user") {
setTyping(false);
return;
}
const t = setTimeout(() => {
setMessages((m) => [
...m,
{
id: nextId.current++,
role: "ai",
text: replies[last.text] ?? FALLBACK,
images: last.images,
},
]);
setTyping(false);
scrollRef.current?.scrollToEnd({ animated: true });
}, 900);
return () => clearTimeout(t);
}, [typing, messages, replies]);
return (
<SafeAreaView className="flex-1 bg-white dark:bg-[#0B0B0F]" edges={["top"]}>
{/* Header — wordmark left, actions right; flat, no chrome pills. */}
<View className="flex-row items-center px-4 pb-2 pt-2">
<Press
haptic="light"
onPress={onBack}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-10 w-10 items-center justify-center rounded-full"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
<View className="flex-1 flex-row items-center justify-center gap-1.5">
<LumioBot size={30} />
<Text className="text-[17px] font-bold" accessibilityRole="header">
{name}
</Text>
</View>
<Press
haptic="light"
onPress={() => setMessages([])}
accessibilityRole="button"
accessibilityLabel="New chat"
className="h-10 w-10 items-center justify-center rounded-full"
>
<Icon name="edit" size="md" color="foreground" />
</Press>
</View>
<ScrollView
ref={scrollRef}
className="flex-1"
contentContainerStyle={{ flexGrow: 1, paddingBottom: composerH + 16 }}
showsVerticalScrollIndicator={false}
>
{messages.length === 0 ? (
<View className="flex-1 justify-end px-5 pb-4">
{/* Capability rail — the ref's three quiet rows above the
input, each one a real action. */}
<Mount className="mb-6 items-center gap-2">
<LumioBot size={56} />
<Text variant="muted" className="text-center text-[13px]">
{tagline}
</Text>
</Mount>
<View className="overflow-hidden rounded-2xl">
{actions.map((a, i) => (
<Press
key={a.title}
haptic="light"
onPress={() => send(a.title, a.images)}
accessibilityRole="button"
accessibilityLabel={`Action: ${a.title}`}
className={cn(
"w-full flex-row items-center gap-3 px-1 py-3.5",
i > 0 && "border-t border-[#EEEEF2]"
)}
>
<Icon name={a.icon} size="md" color="#1B1B26" />
<Text className="flex-1 text-[15px] font-medium">{a.title}</Text>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</Press>
))}
</View>
</View>
) : (
<View className="gap-3 px-4 pt-4">
{messages.map((m) =>
m.role === "user" ? (
<View
key={m.id}
className="max-w-[80%] self-end rounded-2xl rounded-br-md bg-[#1B1B26] px-4 py-3"
>
<Text className="text-white">{m.text}</Text>
</View>
) : (
<View key={m.id} className="self-start gap-2 pr-6">
<View className="flex-row items-start gap-2">
<View className="mt-1">
<LumioBot size={18} />
</View>
<Text className="flex-1 text-[15px] leading-6">{m.text}</Text>
</View>
{m.images ? (
<View className="flex-row gap-2 pl-6">
{m.images.map((u) => (
<Image
key={u}
source={{ uri: u }}
style={{ width: 96, height: 80, borderRadius: 16, backgroundColor: "#F1F1F5" }}
accessibilityLabel="Generated image"
/>
))}
</View>
) : null}
</View>
)
)}
{typing ? (
<View className="self-start px-2 py-3.5">
<View className="flex-row items-center gap-1">
{[0, 1, 2].map((i) => (
<ThinkingDot key={i} delay={i * 160} />
))}
</View>
</View>
) : null}
</View>
)}
</ScrollView>
{/* Composer — follow-ups ride above the Ask pill: + circle, field,
blue disc. */}
<View
pointerEvents="box-none"
onLayout={(e) => setComposerH(e.nativeEvent.layout.height)}
className="absolute inset-x-0 bottom-0 bg-white px-4 pt-3 dark:bg-[#0B0B0F]"
style={{ paddingBottom: insets.bottom + 4 }}
>
{(() => {
const last = messages[messages.length - 1];
if (!last || last.role !== "ai" || typing) return null;
const asked = messages[messages.length - 2];
const ups = (asked && FOLLOW_UPS[asked.text]) || GENERIC_FOLLOW_UPS;
return (
<View className="mb-2 flex-row flex-wrap gap-2">
{ups.map((u) => (
<Press
key={u}
onPress={() => send(u)}
accessibilityRole="button"
accessibilityLabel={`Ask: ${u}`}
className="flex-row items-center gap-1.5 rounded-full bg-[#F1F1F5] px-3 py-1.5"
>
<Text className="text-xs font-medium text-foreground">{u}</Text>
<Icon name="arrow-up" size="sm" color="mutedForeground" />
</Press>
))}
</View>
);
})()}
<View className="flex-row items-center gap-2">
<View className="flex-1 flex-row items-center gap-2 rounded-full border border-[#E5E5EA] bg-[#F7F7F9] pl-3 pr-1.5">
<Press
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel="Attach"
className="h-8 w-8 items-center justify-center"
>
<Icon name="plus" size="md" color="foreground" />
</Press>
<View className="flex-1">
<Input
value={draft}
onChangeText={setDraft}
onSubmitEditing={() => send(draft)}
placeholder={`Ask ${name}…`}
returnKeyType="send"
accessibilityLabel="Message input"
className="border-0 bg-transparent px-1"
/>
</View>
{draft.trim() ? (
<Press
onPress={() => send(draft)}
accessibilityRole="button"
accessibilityLabel="Send message"
className="h-9 w-9 items-center justify-center rounded-full bg-[#1B1B26]"
>
<Icon name="send" size="sm" color="#fff" />
</Press>
) : (
<Press
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel="Dictate message"
className="h-9 w-9 items-center justify-center rounded-full bg-[#1B1B26]"
>
<Icon name="mic" size="sm" color="#fff" />
</Press>
)}
</View>
</View>
<Text className="pt-2 text-center text-[11px] text-muted-foreground">
{name} can make mistakes — check important info.
</Text>
</View>
</SafeAreaView>
);
}
AiAssistantScreen.displayName = "AiAssistantScreen";
/** One pulsing dot of the thinking indicator — staggered start keeps the
* three dots on a travelling wave. Reduced motion shows a static row. */
function ThinkingDot({ delay }: { delay: number }) {
const reduce = useReducedMotion();
const v = useSharedValue(reduce ? 0.6 : 0.3);
useEffect(() => {
if (reduce) {
v.value = 0.6;
return;
}
v.value = withDelay(delay, withRepeat(withTiming(1, { duration: 550 }), -1, true));
}, [v, delay, reduce]);
const style = useAnimatedStyle(() => ({
opacity: 0.35 + v.value * 0.65,
transform: [{ translateY: (1 - v.value) * 1.5 - 1.5 }],
}));
return (
<Animated.View
style={style}
className="h-1.5 w-1.5 rounded-full bg-muted-foreground"
/>
);
}
ThinkingDot.displayName = "ThinkingDot";
Recreate the "AI Assistant Screen" screen in React Native using LumioUI.
Goal: AI chat: persona header, suggestion chips, typing indicator, working composer Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add chat-ai-assistant
```
Or pull just the components: `npx lumioui add avatar button chip icon input text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `avatar` — Circular user image with fallback initials and status dot.
- imported but not rendered directly — likely used through a sibling or as a utility
### `button` — Tactile pill button with press spring, ink wash and async loading.
- imported but not rendered directly — likely used through a sibling or as a utility
### `chip` — Compact selectable pill with press scale and ink overlay.
- imported but not rendered directly — likely used through a sibling or as a utility
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×8
### `input` — Labeled field with focus ring, error shake and success check.
- `<Input>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×7
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/chat/ai-assistant.tsx` exporting AiAssistantScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import { Image, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
useAnimatedStyle,
useSharedValue,
withDelay,
withRepeat,
withTiming,
} from "react-native-reanimated";
import { Button, Icon, Input, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic, useReducedMotion } from "@lumioui/core";
import { LumioBot, Mount, Press } from "../shared";
interface Message {
id: number;
role: "user" | "ai";
text: string;
/** Image replies (the "Create an image" action) carry thumbnails. */
images?: string[];
}
export interface AiAssistantScreenProps {
name?: string;
tagline?: string;
actions?: { title: string; icon: IconName; images?: string[] }[];
replies?: Record<string, string>;
onSend?: (text: string) => void;
onBack?: () => void;
}
/** The ChatGPT-idiom action rail: three hairline-separated rows, each
* a capability the assistant can demonstrate. */
const ACTIONS: { title: string; icon: IconName; images?: string[] }[] = [
{ title: "Start a voice chat", icon: "mic" },
{
title: "Create an image",
icon: "image",
images: [
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=240&h=180&fit=crop&q=80",
"https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=240&h=180&fit=crop&q=80",
"https://images.unsplash.com/photo-1620121692029-d088224ddc74?w=240&h=180&fit=crop&q=80",
],
},
{ title: "Write or edit", icon: "edit" },
];
const REPLIES: Record<string, string> = {
"Start a voice chat":
"Voice is on — I'm listening. Ask me to plan, summarize or draft anything out loud.",
"Create an image":
"Here's a direction — warm gradient glass, three variations. Say the word and I'll push it further.",
"Write or edit":
"Send me the draft — I'll tighten the copy, fix the rhythm, and keep your voice.",
};
const FALLBACK =
"Got it — here's a starting point. Pick an action below or ask me something specific and I'll go deeper.";
/** Next-step chips after each reply — follow-ups ride up over the
* composer so the thread never dead-ends. */
const FOLLOW_UPS: Record<string, string[]> = {
"Start a voice chat": ["Transcribe this", "Change my voice", "Mute"],
"Create an image": ["More variations", "Higher contrast", "Square crop"],
"Write or edit": ["Make it shorter", "More formal", "Add emojis"],
};
const GENERIC_FOLLOW_UPS = ["Tell me more", "Try another angle", "Make it shorter"];
/** AI assistant chat — the ChatGPT idiom: wordmark header, a quiet
* capability rail (voice / image / write), plain-text replies with an
* occasional media strip, and the Ask pill pinned at the bottom. */
export function AiAssistantScreen({
name = "Lumio",
tagline = "Ask anything — voice, images or writing.",
actions = ACTIONS,
replies = REPLIES,
onSend,
onBack,
}: AiAssistantScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [messages, setMessages] = useState<Message[]>([]);
const [composerH, setComposerH] = useState(0);
const [draft, setDraft] = useState("");
const [typing, setTyping] = useState(false);
const nextId = useRef(0);
const scrollRef = useRef<ScrollView>(null);
const send = (text: string, images?: string[]) => {
const clean = text.trim();
if (!clean) return;
haptics.light();
setMessages((m) => [...m, { id: nextId.current++, role: "user", text: clean, images }]);
setDraft("");
setTyping(true);
onSend?.(clean);
scrollRef.current?.scrollToEnd({ animated: true });
};
// Canned reply after a short "thinking" beat — makes the demo feel live.
useEffect(() => {
if (!typing) return;
const last = messages[messages.length - 1];
if (!last || last.role !== "user") {
setTyping(false);
return;
}
const t = setTimeout(() => {
setMessages((m) => [
...m,
{
id: nextId.current++,
role: "ai",
text: replies[last.text] ?? FALLBACK,
images: last.images,
},
]);
setTyping(false);
scrollRef.current?.scrollToEnd({ animated: true });
}, 900);
return () => clearTimeout(t);
}, [typing, messages, replies]);
return (
<SafeAreaView className="flex-1 bg-white dark:bg-[#0B0B0F]" edges={["top"]}>
{/* Header — wordmark left, actions right; flat, no chrome pills. */}
<View className="flex-row items-center px-4 pb-2 pt-2">
<Press
haptic="light"
onPress={onBack}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-10 w-10 items-center justify-center rounded-full"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
<View className="flex-1 flex-row items-center justify-center gap-1.5">
<LumioBot size={30} />
<Text className="text-[17px] font-bold" accessibilityRole="header">
{name}
</Text>
</View>
<Press
haptic="light"
onPress={() => setMessages([])}
accessibilityRole="button"
accessibilityLabel="New chat"
className="h-10 w-10 items-center justify-center rounded-full"
>
<Icon name="edit" size="md" color="foreground" />
</Press>
</View>
<ScrollView
ref={scrollRef}
className="flex-1"
contentContainerStyle={{ flexGrow: 1, paddingBottom: composerH + 16 }}
showsVerticalScrollIndicator={false}
>
{messages.length === 0 ? (
<View className="flex-1 justify-end px-5 pb-4">
{/* Capability rail — the ref's three quiet rows above the
input, each one a real action. */}
<Mount className="mb-6 items-center gap-2">
<LumioBot size={56} />
<Text variant="muted" className="text-center text-[13px]">
{tagline}
</Text>
</Mount>
<View className="overflow-hidden rounded-2xl">
{actions.map((a, i) => (
<Press
key={a.title}
haptic="light"
onPress={() => send(a.title, a.images)}
accessibilityRole="button"
accessibilityLabel={`Action: ${a.title}`}
className={cn(
"w-full flex-row items-center gap-3 px-1 py-3.5",
i > 0 && "border-t border-[#EEEEF2]"
)}
>
<Icon name={a.icon} size="md" color="#1B1B26" />
<Text className="flex-1 text-[15px] font-medium">{a.title}</Text>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</Press>
))}
</View>
</View>
) : (
<View className="gap-3 px-4 pt-4">
{messages.map((m) =>
m.role === "user" ? (
<View
key={m.id}
className="max-w-[80%] self-end rounded-2xl rounded-br-md bg-[#1B1B26] px-4 py-3"
>
<Text className="text-white">{m.text}</Text>
</View>
) : (
<View key={m.id} className="self-start gap-2 pr-6">
<View className="flex-row items-start gap-2">
<View className="mt-1">
<LumioBot size={18} />
</View>
<Text className="flex-1 text-[15px] leading-6">{m.text}</Text>
</View>
{m.images ? (
<View className="flex-row gap-2 pl-6">
{m.images.map((u) => (
<Image
key={u}
source={{ uri: u }}
style={{ width: 96, height: 80, borderRadius: 16, backgroundColor: "#F1F1F5" }}
accessibilityLabel="Generated image"
/>
))}
</View>
) : null}
</View>
)
)}
{typing ? (
<View className="self-start px-2 py-3.5">
<View className="flex-row items-center gap-1">
{[0, 1, 2].map((i) => (
<ThinkingDot key={i} delay={i * 160} />
))}
</View>
</View>
) : null}
</View>
)}
</ScrollView>
{/* Composer — follow-ups ride above the Ask pill: + circle, field,
blue disc. */}
<View
pointerEvents="box-none"
onLayout={(e) => setComposerH(e.nativeEvent.layout.height)}
className="absolute inset-x-0 bottom-0 bg-white px-4 pt-3 dark:bg-[#0B0B0F]"
style={{ paddingBottom: insets.bottom + 4 }}
>
{(() => {
const last = messages[messages.length - 1];
if (!last || last.role !== "ai" || typing) return null;
const asked = messages[messages.length - 2];
const ups = (asked && FOLLOW_UPS[asked.text]) || GENERIC_FOLLOW_UPS;
return (
<View className="mb-2 flex-row flex-wrap gap-2">
{ups.map((u) => (
<Press
key={u}
onPress={() => send(u)}
accessibilityRole="button"
accessibilityLabel={`Ask: ${u}`}
className="flex-row items-center gap-1.5 rounded-full bg-[#F1F1F5] px-3 py-1.5"
>
<Text className="text-xs font-medium text-foreground">{u}</Text>
<Icon name="arrow-up" size="sm" color="mutedForeground" />
</Press>
))}
</View>
);
})()}
<View className="flex-row items-center gap-2">
<View className="flex-1 flex-row items-center gap-2 rounded-full border border-[#E5E5EA] bg-[#F7F7F9] pl-3 pr-1.5">
<Press
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel="Attach"
className="h-8 w-8 items-center justify-center"
>
<Icon name="plus" size="md" color="foreground" />
</Press>
<View className="flex-1">
<Input
value={draft}
onChangeText={setDraft}
onSubmitEditing={() => send(draft)}
placeholder={`Ask ${name}…`}
returnKeyType="send"
accessibilityLabel="Message input"
className="border-0 bg-transparent px-1"
/>
</View>
{draft.trim() ? (
<Press
onPress={() => send(draft)}
accessibilityRole="button"
accessibilityLabel="Send message"
className="h-9 w-9 items-center justify-center rounded-full bg-[#1B1B26]"
>
<Icon name="send" size="sm" color="#fff" />
</Press>
) : (
<Press
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel="Dictate message"
className="h-9 w-9 items-center justify-center rounded-full bg-[#1B1B26]"
>
<Icon name="mic" size="sm" color="#fff" />
</Press>
)}
</View>
</View>
<Text className="pt-2 text-center text-[11px] text-muted-foreground">
{name} can make mistakes — check important info.
</Text>
</View>
</SafeAreaView>
);
}
AiAssistantScreen.displayName = "AiAssistantScreen";
/** One pulsing dot of the thinking indicator — staggered start keeps the
* three dots on a travelling wave. Reduced motion shows a static row. */
function ThinkingDot({ delay }: { delay: number }) {
const reduce = useReducedMotion();
const v = useSharedValue(reduce ? 0.6 : 0.3);
useEffect(() => {
if (reduce) {
v.value = 0.6;
return;
}
v.value = withDelay(delay, withRepeat(withTiming(1, { duration: 550 }), -1, true));
}, [v, delay, reduce]);
const style = useAnimatedStyle(() => ({
opacity: 0.35 + v.value * 0.65,
transform: [{ translateY: (1 - v.value) * 1.5 - 1.5 }],
}));
return (
<Animated.View
style={style}
className="h-1.5 w-1.5 rounded-full bg-muted-foreground"
/>
);
}
ThinkingDot.displayName = "ThinkingDot";
```
Screen: https://lumioui.dev/screens/chat-ai-assistant