Lemma Agent Conversation Experience

1"use client";
2 
3import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
4import { X } from "lucide-react";
5import { cn } from "@/components/lemma/lib/utils";
6import { Button } from "@/components/lemma/ui/button";
7import { Badge } from "@/components/lemma/ui/badge";
8import {
9  Select,
10  SelectContent,
11  SelectItem,
12  SelectTrigger,
13  SelectValue,
14} from "@/components/lemma/ui/select";
15import type {
16  AssistantConversationListItem,
17  AssistantConversationRenderArgs,
18  LemmaAssistantRadius,
19} from "./assistant-types.js";
20 
21export type AssistantSurfaceTone = "default" | "subtle" | "flat";
22export type AssistantThemeMode = "auto" | "light" | "dark";
23 
24const RADIUS_MAP: Record<string, Record<string, string>> = {
25  none: { shell: "rounded-none", item: "rounded-none", bubble: "rounded-none", inline: "rounded-none" },
26  sm: { shell: "rounded-sm", item: "rounded-sm", bubble: "rounded-sm", inline: "rounded-sm" },
27  md: { shell: "rounded-md", item: "rounded-md", bubble: "rounded-md", inline: "rounded-md" },
28  lg: { shell: "rounded-lg", item: "rounded-md", bubble: "rounded-lg", inline: "rounded-md" },
29  xl: { shell: "rounded-xl", item: "rounded-lg", bubble: "rounded-xl", inline: "rounded-lg" },
30};
31 
32function assistantRadius(radius: LemmaAssistantRadius, kind: "shell" | "item" | "bubble" | "inline"): string {
33  return RADIUS_MAP[radius]?.[kind] ?? RADIUS_MAP.lg[kind];
34}
35 
36export function conversationStatusDotColor(status?: string | null): string {
37  const s = (status || "").toLowerCase();
38  if (s === "running" || s === "active") return "bg-primary";
39  if (s === "completed" || s === "done") return "bg-green-500";
40  if (s === "error" || s === "failed") return "bg-destructive";
41  return "bg-amber-500";
42}
43 
44export function relativeTimeAgo(dateStr?: string | null): string {
45  if (!dateStr) return "";
46  const date = new Date(dateStr);
47  if (isNaN(date.getTime())) return "";
48  const now = Date.now();
49  const diffMs = now - date.getTime();
50  const seconds = Math.floor(diffMs / 1000);
51  if (seconds < 60) return "just now";
52  const minutes = Math.floor(seconds / 60);
53  if (minutes < 60) return `${minutes}m ago`;
54  const hours = Math.floor(minutes / 60);
55  if (hours < 24) return `${hours}h ago`;
56  const days = Math.floor(hours / 24);
57  return `${days}d ago`;
58}
59 
60export interface AssistantThemeScopeProps extends ComponentPropsWithoutRef<"div"> {
61  children: ReactNode;
62  theme?: AssistantThemeMode;
63}
64 
65// … truncated