@gugacoder/agentic-chat 0.2.0

package/src/conversations/ConversationListItem.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Pencil, Star } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils.js";
+import { Input } from "../ui/input.js";
+import { formatRelativeTime } from "./utils.js";
+import type { Conversation } from "./types.js";
+
+interface ConversationListItemProps {
+  conversation: Conversation;
+  agentLabel?: string;
+  isActive?: boolean;
+  isRenaming?: boolean;
+  renameValue?: string;
+  onRenameChange?: (value: string) => void;
+  onRenameCommit?: () => void;
+  onRenameCancel?: () => void;
+  onStartRename?: (e: React.MouseEvent) => void;
+  onToggleStar?: (e: React.MouseEvent) => void;
+  onClick?: () => void;
+  badgesExtra?: React.ReactNode;
+  className?: string;
+}
+
+function ConversationListItem({
+  conversation,
+  agentLabel,
+  isActive,
+  isRenaming,
+  renameValue = "",
+  onRenameChange,
+  onRenameCommit,
+  onRenameCancel,
+  onStartRename,
+  onToggleStar,
+  onClick,
+  badgesExtra,
+  className,
+}: ConversationListItemProps) {
+  const handleRenameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onRenameCommit?.();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onRenameCancel?.();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "group relative flex items-center gap-1 rounded-md px-1 py-1 hover:bg-accent",
+        isActive && "bg-accent",
+        className,
+      )}
+    >
+      {/* Star icon */}
+      <button
+        className={cn(
+          "shrink-0 rounded p-0.5 transition-colors",
+          conversation.starred
+            ? "text-yellow-500 hover:text-yellow-400"
+            : "text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-yellow-500",
+        )}
+        onClick={onToggleStar}
+        aria-label={conversation.starred ? "Unstar conversation" : "Star conversation"}
+        tabIndex={-1}
+      >
+        <Star className={cn("size-3.5", conversation.starred && "fill-yellow-500")} />
+      </button>
+
+      {/* Main clickable area */}
+      {isRenaming ? (
+        <Input
+          className="h-6 flex-1 px-1 py-0 text-sm"
+          value={renameValue}
+          onChange={(e) => onRenameChange?.(e.target.value)}
+          onKeyDown={handleRenameKeyDown}
+          onBlur={onRenameCancel}
+          autoFocus
+        />
+      ) : (
+        <button
+          className="flex min-w-0 flex-1 flex-col items-start text-left"
+          onClick={onClick}
+        >
+          <div className="flex w-full items-center gap-1">
+            {agentLabel && (
+              <span className="shrink-0 rounded bg-secondary px-1 py-0 text-[10px] text-secondary-foreground">
+                {agentLabel}
+              </span>
+            )}
+            {badgesExtra}
+            <span className="ml-auto shrink-0 text-[10px] text-muted-foreground">
+              {formatRelativeTime(conversation.updatedAt)}
+            </span>
+          </div>
+          <span className="w-full truncate text-sm text-foreground">
+            {conversation.title ?? "Untitled"}
+          </span>
+        </button>
+      )}
+
+      {/* Pencil icon (hover) */}
+      {!isRenaming && (
+        <button
+          className="shrink-0 rounded p-0.5 text-muted-foreground opacity-0 transition-colors group-hover:opacity-100 hover:text-foreground"
+          onClick={onStartRename}
+          aria-label="Rename conversation"
+          tabIndex={-1}
+        >
+          <Pencil className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { ConversationListItem };
+export type { ConversationListItemProps };

package/src/conversations/DeleteDialog.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button } from "../ui/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog.js";
+
+interface DeleteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  isPending?: boolean;
+  title?: string;
+  description?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+}
+
+function DeleteDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  isPending,
+  title = "Delete conversation",
+  description = "This conversation will be permanently removed.",
+  cancelLabel = "Cancel",
+  confirmLabel = "Delete",
+}: DeleteDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+            {cancelLabel}
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} disabled={isPending}>
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { DeleteDialog };
+export type { DeleteDialogProps };

package/src/conversations/RenameDialog.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "../ui/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog.js";
+import { Input } from "../ui/input.js";
+
+interface RenameDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  onConfirm: () => void;
+  isPending?: boolean;
+  title?: string;
+  placeholder?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+}
+
+function RenameDialog({
+  open,
+  onOpenChange,
+  value,
+  onValueChange,
+  onConfirm,
+  isPending,
+  title = "Rename conversation",
+  placeholder = "Conversation title",
+  cancelLabel = "Cancel",
+  confirmLabel = "Save",
+}: RenameDialogProps) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && value.trim() && !isPending) {
+      e.preventDefault();
+      onConfirm();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <Input
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          autoFocus
+        />
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+            {cancelLabel}
+          </Button>
+          <Button onClick={onConfirm} disabled={!value.trim() || isPending}>
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { RenameDialog };
+export type { RenameDialogProps };

package/src/conversations/index.ts

@@ -0,0 +1,14 @@
+export { ConversationList } from "./ConversationList.js";
+export type { ConversationListProps } from "./ConversationList.js";
+
+export { ConversationBar } from "./ConversationBar.js";
+export type { ConversationBarProps } from "./ConversationBar.js";
+
+export { useConversations } from "./useConversations.js";
+export type { UseConversationsOptions, UseConversationsReturn } from "./useConversations.js";
+
+export { useIsMobile } from "../hooks/useIsMobile.js";
+
+export { formatRelativeTime, buildInitialMessages, groupConversations } from "./utils.js";
+
+export type { Conversation, BackendMessage } from "./types.js";

package/src/conversations/types.ts

@@ -0,0 +1,17 @@
+export interface Conversation {
+  id: string;
+  title?: string;
+  agentId: string;
+  updatedAt: string;
+  starred: boolean;
+  metadata?: Record<string, unknown>;
+}
+
+export interface BackendMessage {
+  id?: string;
+  role: string;
+  content: string | unknown[];
+  _meta?: { id?: string; ts?: string; userId?: string; metadata?: Record<string, unknown> };
+  timestamp?: string;
+  metadata?: Record<string, unknown>;
+}

package/src/conversations/useConversations.ts

@@ -0,0 +1,148 @@
+import { useState, useCallback, useEffect } from "react";
+import type { Conversation } from "./types.js";
+
+export interface UseConversationsOptions {
+  endpoint?: string;
+  token?: string;
+  fetcher?: (url: string, init?: RequestInit) => Promise<Response>;
+  autoFetch?: boolean;
+}
+
+export interface UseConversationsReturn {
+  conversations: Conversation[];
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+  create: (agentId: string) => Promise<Conversation>;
+  rename: (id: string, title: string) => Promise<void>;
+  star: (id: string, starred: boolean) => Promise<void>;
+  remove: (id: string) => Promise<void>;
+  exportUrl: (id: string, format?: "json" | "markdown") => string;
+}
+
+export function useConversations(options: UseConversationsOptions = {}): UseConversationsReturn {
+  const { endpoint = "", token, fetcher, autoFetch = true } = options;
+
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const doFetch = useCallback(
+    (url: string, init?: RequestInit) => {
+      const fn = fetcher ?? fetch;
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        ...(init?.headers as Record<string, string> | undefined),
+      };
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+      }
+      return fn(url, { ...init, headers });
+    },
+    [fetcher, token],
+  );
+
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await doFetch(`${endpoint}/api/v1/ai/conversations`);
+      if (!res.ok) throw new Error(`Failed to fetch conversations: ${res.status}`);
+      const data = (await res.json()) as Conversation[];
+      setConversations(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [doFetch, endpoint]);
+
+  useEffect(() => {
+    if (autoFetch) {
+      void refresh();
+    }
+  }, [autoFetch, refresh]);
+
+  const create = useCallback(
+    async (agentId: string): Promise<Conversation> => {
+      const res = await doFetch(`${endpoint}/api/v1/ai/conversations`, {
+        method: "POST",
+        body: JSON.stringify({ agentId }),
+      });
+      if (!res.ok) throw new Error(`Failed to create conversation: ${res.status}`);
+      const created = (await res.json()) as Conversation;
+      setConversations((prev) => [created, ...prev]);
+      return created;
+    },
+    [doFetch, endpoint],
+  );
+
+  const rename = useCallback(
+    async (id: string, title: string): Promise<void> => {
+      const res = await doFetch(`${endpoint}/api/v1/ai/conversations/${id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ title }),
+      });
+      if (!res.ok) throw new Error(`Failed to rename conversation: ${res.status}`);
+      setConversations((prev) =>
+        prev.map((c) => (c.id === id ? { ...c, title } : c)),
+      );
+    },
+    [doFetch, endpoint],
+  );
+
+  const star = useCallback(
+    async (id: string, starred: boolean): Promise<void> => {
+      // Optimistic update
+      setConversations((prev) =>
+        prev.map((c) => (c.id === id ? { ...c, starred } : c)),
+      );
+      try {
+        const res = await doFetch(`${endpoint}/api/v1/ai/conversations/${id}`, {
+          method: "PATCH",
+          body: JSON.stringify({ starred }),
+        });
+        if (!res.ok) throw new Error(`Failed to star conversation: ${res.status}`);
+      } catch (err) {
+        // Rollback on error
+        setConversations((prev) =>
+          prev.map((c) => (c.id === id ? { ...c, starred: !starred } : c)),
+        );
+        throw err;
+      }
+    },
+    [doFetch, endpoint],
+  );
+
+  const remove = useCallback(
+    async (id: string): Promise<void> => {
+      const res = await doFetch(`${endpoint}/api/v1/ai/conversations/${id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error(`Failed to delete conversation: ${res.status}`);
+      setConversations((prev) => prev.filter((c) => c.id !== id));
+    },
+    [doFetch, endpoint],
+  );
+
+  const exportUrl = useCallback(
+    (id: string, format: "json" | "markdown" = "json"): string => {
+      const params = new URLSearchParams({ format });
+      if (token) params.set("token", token);
+      return `${endpoint}/api/v1/ai/conversations/${id}/export?${params.toString()}`;
+    },
+    [endpoint, token],
+  );
+
+  return {
+    conversations,
+    isLoading,
+    error,
+    refresh,
+    create,
+    rename,
+    star,
+    remove,
+    exportUrl,
+  };
+}

package/src/conversations/utils.ts

@@ -0,0 +1,159 @@
+import type { Message } from "@ai-sdk/react";
+import type { BackendMessage, Conversation } from "./types.js";
+
+export function formatRelativeTime(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return "now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export function buildInitialMessages(messages?: BackendMessage[]): Message[] | undefined {
+  if (!messages) return undefined;
+
+  type Part = {
+    type?: string;
+    text?: string;
+    toolCallId?: string;
+    toolName?: string;
+    input?: Record<string, unknown>;
+    output?: unknown;
+    _ref?: string;
+    mimeType?: string;
+  };
+
+  // Index tool results by toolCallId
+  const toolResults = new Map<string, { toolName: string; result: unknown }>();
+  for (const m of messages) {
+    if (m.role === "tool" && Array.isArray(m.content)) {
+      for (const part of m.content as Part[]) {
+        if (part.type === "tool-result" && part.toolCallId) {
+          const raw = part.output as { type?: string; value?: unknown } | unknown;
+          const value =
+            typeof raw === "object" &&
+            raw !== null &&
+            "type" in (raw as Record<string, unknown>) &&
+            (raw as Record<string, unknown>).type === "json"
+              ? (raw as { value: unknown }).value
+              : raw;
+          toolResults.set(part.toolCallId, { toolName: part.toolName ?? "", result: value });
+        }
+      }
+    }
+  }
+
+  const result: Message[] = [];
+  let i = 0;
+
+  while (i < messages.length) {
+    const m = messages[i]!;
+
+    if (m.role === "user") {
+      let content = "";
+      const parts: unknown[] = [];
+
+      if (typeof m.content === "string") {
+        content = m.content;
+      } else if (Array.isArray(m.content)) {
+        for (const p of m.content as Record<string, unknown>[]) {
+          if (p["type"] === "text") {
+            const text = String(p["text"] ?? "");
+            if (!text.startsWith("[📎") && !content) content = text;
+            parts.push(p);
+          } else if (p["type"] === "image" || p["type"] === "file") {
+            parts.push({ type: p["type"], _ref: p["_ref"], mimeType: p["mimeType"] });
+          } else {
+            parts.push(p);
+          }
+        }
+      }
+
+      result.push({
+        id: m._meta?.id ?? m.id ?? `msg-${i}`,
+        role: "user",
+        content,
+        ...(parts.length > 0 ? { parts } : {}),
+      } as Message);
+      i++;
+      continue;
+    }
+
+    if (m.role === "tool") {
+      i++;
+      continue;
+    }
+
+    if (m.role === "assistant") {
+      const parts: unknown[] = [];
+      let textContent = "";
+      const id = m._meta?.id ?? m.id ?? `msg-${i}`;
+
+      while (
+        i < messages.length &&
+        (messages[i]!.role === "assistant" || messages[i]!.role === "tool")
+      ) {
+        const cur = messages[i]!;
+
+        if (cur.role === "tool") {
+          i++;
+          continue;
+        }
+
+        if (typeof cur.content === "string") {
+          if (cur.content) {
+            parts.push({ type: "text", text: cur.content });
+            textContent += cur.content;
+          }
+        } else if (Array.isArray(cur.content)) {
+          for (const p of cur.content as Part[]) {
+            if (p.type === "text" && p.text) {
+              parts.push({ type: "text", text: p.text });
+              textContent += p.text;
+            } else if (p.type === "tool-call" && p.toolCallId) {
+              const tr = toolResults.get(p.toolCallId);
+              parts.push({
+                type: "tool-invocation",
+                toolInvocation: {
+                  toolName: p.toolName ?? "",
+                  toolCallId: p.toolCallId,
+                  state: tr ? "result" : "call",
+                  args: p.input,
+                  result: tr?.result,
+                },
+              });
+            }
+          }
+        }
+        i++;
+      }
+
+      result.push({ id, role: "assistant", content: textContent, parts } as Message);
+      continue;
+    }
+
+    i++;
+  }
+
+  return result;
+}
+
+export function groupConversations(conversations: Conversation[]): {
+  favorites: Conversation[];
+  history: Conversation[];
+} {
+  const favorites: Conversation[] = [];
+  const history: Conversation[] = [];
+  for (const conv of conversations) {
+    if (conv.starred) {
+      favorites.push(conv);
+    } else {
+      history.push(conv);
+    }
+  }
+  return { favorites, history };
+}

package/src/display/AlertRenderer.tsx

@@ -0,0 +1,27 @@
+import type { DisplayAlert } from "@gugacoder/agentic-sdk";
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+
+type AlertVariant = "info" | "warning" | "error" | "success";
+
+const VARIANT_CONFIG: Record<AlertVariant, { Icon: typeof Info; className?: string }> = {
+  info: { Icon: Info, className: "text-blue-600 dark:text-blue-400 *:[svg]:text-blue-600 dark:*:[svg]:text-blue-400 border-blue-500/50" },
+  warning: { Icon: AlertTriangle, className: "text-yellow-600 dark:text-yellow-400 *:[svg]:text-yellow-600 dark:*:[svg]:text-yellow-400 border-yellow-500/50" },
+  error: { Icon: AlertCircle },
+  success: { Icon: CheckCircle, className: "text-green-600 dark:text-green-400 *:[svg]:text-green-600 dark:*:[svg]:text-green-400 border-green-500/50" },
+};
+
+export function AlertRenderer({ variant = "info", title, message }: DisplayAlert) {
+  const { Icon, className } = VARIANT_CONFIG[variant as AlertVariant];
+
+  return (
+    <Alert
+      variant={variant === "error" ? "destructive" : "default"}
+      className={className}
+    >
+      <Icon />
+      {title && <AlertTitle>{title}</AlertTitle>}
+      <AlertDescription>{message}</AlertDescription>
+    </Alert>
+  );
+}