@gugacoder/agentic-chat 0.2.0

package/src/components/MessageList.tsx

@@ -0,0 +1,139 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { useRef, useEffect, useMemo, useCallback } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import type { Message } from "@ai-sdk/react";
+import { MessageBubble } from "./MessageBubble.js";
+import { StreamingIndicator } from "./StreamingIndicator.js";
+import { ErrorNote } from "./ErrorNote.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import { ScrollBar } from "../ui/scroll-area.js";
+import { cn } from "../lib/utils.js";
+
+export interface MessageListProps {
+  messages: Message[];
+  isLoading?: boolean;
+  displayRenderers?: DisplayRendererMap;
+  attachmentUrl?: (ref: string) => string;
+  className?: string;
+  error?: Error;
+  onRetry?: () => void;
+}
+
+export function MessageList({ messages, isLoading, displayRenderers, attachmentUrl, className, error, onRetry }: MessageListProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const isFollowingRef = useRef(true);
+
+  const lastAssistantIndex = useMemo(() =>
+    messages.reduceRight((found, msg, i) => {
+      if (found !== -1) return found;
+      return msg.role === "assistant" ? i : -1;
+    }, -1),
+    [messages]
+  );
+
+  const virtualizer = useVirtualizer({
+    count: messages.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: () => 80,
+    overscan: 5,
+    paddingStart: 16,
+  });
+
+  // Track scroll position to detect if user is following
+  const handleScroll = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const distanceFromBottom =
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    isFollowingRef.current = distanceFromBottom <= 100;
+  }, []);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    return () => viewport.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  // Auto-scroll to bottom when following
+  useEffect(() => {
+    if (messages.length > 0 && isFollowingRef.current) {
+      virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+    }
+  }, [messages, virtualizer]);
+
+  // Auto-scroll when error appears
+  useEffect(() => {
+    if (error && isFollowingRef.current) {
+      const viewport = viewportRef.current;
+      if (viewport) viewport.scrollTop = viewport.scrollHeight;
+    }
+  }, [error]);
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  if (messages.length === 0) {
+    return (
+      <ScrollAreaPrimitive.Root className={cn("flex-1 relative overflow-hidden", className)}>
+        <ScrollAreaPrimitive.Viewport ref={viewportRef} className="h-full w-full rounded-[inherit]">
+          <div className="flex items-center justify-center text-muted-foreground text-sm py-8">
+            Envie uma mensagem para comecar
+          </div>
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+      </ScrollAreaPrimitive.Root>
+    );
+  }
+
+  return (
+    <ScrollAreaPrimitive.Root className={cn("flex-1 relative overflow-hidden", className)}>
+      <ScrollAreaPrimitive.Viewport ref={viewportRef} className="h-full w-full rounded-[inherit]">
+        <div
+          className="relative w-full"
+          style={{ height: virtualizer.getTotalSize() + 16 }}
+        >
+          <div>
+            {virtualItems.map((virtualRow) => {
+              const message = messages[virtualRow.index];
+              return (
+                <div
+                  key={message.id ?? virtualRow.index}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  className="pb-3 px-4"
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                >
+                  <MessageBubble
+                    message={message}
+                    isStreaming={virtualRow.index === lastAssistantIndex && isLoading && messages[messages.length - 1]?.role === "assistant"}
+                    displayRenderers={displayRenderers}
+                    attachmentUrl={attachmentUrl}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        {isLoading && messages[messages.length - 1]?.role !== "assistant" && (
+          <div className="px-4 pb-3">
+            <StreamingIndicator />
+          </div>
+        )}
+        {!isLoading && error && messages.length > 0 && messages[messages.length - 1]?.role !== "assistant" && (
+          <div className="px-4 pb-3">
+            <ErrorNote onRetry={onRetry} />
+          </div>
+        )}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}

package/src/components/StreamingIndicator.tsx

@@ -0,0 +1,19 @@
+export function StreamingIndicator() {
+  return (
+    <span
+      className="inline-flex items-end gap-1.5 py-1 mt-4"
+      aria-label="Gerando resposta..."
+      role="status"
+    >
+      <span className="size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_0ms]" />
+      <span className="size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_150ms]" />
+      <span className="size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_300ms]" />
+      <style>{`
+        @keyframes streaming-bounce {
+          0%, 60%, 100% { transform: translateY(0); }
+          30% { transform: translateY(-4px); }
+        }
+      `}</style>
+    </span>
+  );
+}

package/src/conversations/CollapsibleGroup.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import * as React from "react";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+
+interface CollapsibleGroupProps {
+  label: string;
+  icon?: React.ReactNode;
+  open: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}
+
+function CollapsibleGroup({ label, icon, open, onToggle, children }: CollapsibleGroupProps) {
+  return (
+    <Collapsible open={open} onOpenChange={onToggle}>
+      <CollapsibleTrigger asChild>
+        <button
+          className="flex w-full items-center gap-1 px-2 py-1 hover:bg-accent rounded-md"
+          aria-expanded={open}
+        >
+          <ChevronRight
+            className={cn(
+              "size-3 shrink-0 text-muted-foreground transition-transform duration-200",
+              open && "rotate-90",
+            )}
+          />
+          {icon && <span className="shrink-0">{icon}</span>}
+          <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export { CollapsibleGroup };
+export type { CollapsibleGroupProps };

package/src/conversations/ConversationBar.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import * as React from "react";
+import { ArrowLeft, Download, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { cn } from "../lib/utils.js";
+import { DeleteDialog } from "./DeleteDialog.js";
+import { RenameDialog } from "./RenameDialog.js";
+
+interface ConversationBarProps {
+  // Data
+  title?: string;
+  agentLabel?: string;
+  isLoading?: boolean;
+
+  // Actions
+  onRename?: (title: string) => void;
+  onExport?: () => void;
+  onDelete?: () => void;
+  onBack?: () => void;
+
+  // Controlled dialog state (optional — uncontrolled if not provided)
+  renameOpen?: boolean;
+  onRenameOpenChange?: (open: boolean) => void;
+  deleteOpen?: boolean;
+  onDeleteOpenChange?: (open: boolean) => void;
+
+  // Pending states
+  isPendingRename?: boolean;
+  isPendingDelete?: boolean;
+
+  // Labels
+  renameLabel?: string;
+  exportLabel?: string;
+  deleteLabel?: string;
+  untitledLabel?: string;
+
+  // Extension slots
+  actionsExtra?: React.ReactNode;
+  menuItemsExtra?: React.ReactNode;
+  afterBar?: React.ReactNode;
+
+  // Layout
+  className?: string;
+}
+
+function ConversationBar({
+  title,
+  agentLabel,
+  isLoading,
+  onRename,
+  onExport,
+  onDelete,
+  onBack,
+  renameOpen: renameOpenProp,
+  onRenameOpenChange,
+  deleteOpen: deleteOpenProp,
+  onDeleteOpenChange,
+  isPendingRename,
+  isPendingDelete,
+  renameLabel = "Rename",
+  exportLabel = "Export",
+  deleteLabel = "Delete",
+  untitledLabel = "Untitled",
+  actionsExtra,
+  menuItemsExtra,
+  afterBar,
+  className,
+}: ConversationBarProps) {
+  // Internal dialog state for uncontrolled mode
+  const [internalRenameOpen, setInternalRenameOpen] = React.useState(false);
+  const [internalDeleteOpen, setInternalDeleteOpen] = React.useState(false);
+  const [renameValue, setRenameValue] = React.useState("");
+
+  const isControlledRename = renameOpenProp !== undefined && onRenameOpenChange !== undefined;
+  const isControlledDelete = deleteOpenProp !== undefined && onDeleteOpenChange !== undefined;
+
+  const renameOpen = isControlledRename ? renameOpenProp : internalRenameOpen;
+  const deleteOpen = isControlledDelete ? deleteOpenProp : internalDeleteOpen;
+
+  const setRenameOpen = (open: boolean) => {
+    if (isControlledRename) {
+      onRenameOpenChange(open);
+    } else {
+      setInternalRenameOpen(open);
+    }
+  };
+
+  const setDeleteOpen = (open: boolean) => {
+    if (isControlledDelete) {
+      onDeleteOpenChange(open);
+    } else {
+      setInternalDeleteOpen(open);
+    }
+  };
+
+  const handleRenameClick = () => {
+    setRenameValue(title ?? "");
+    setRenameOpen(true);
+  };
+
+  const handleRenameConfirm = () => {
+    if (renameValue.trim()) {
+      onRename?.(renameValue.trim());
+    }
+    setRenameOpen(false);
+  };
+
+  const handleDeleteConfirm = () => {
+    onDelete?.();
+    setDeleteOpen(false);
+  };
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="flex items-center gap-2 border-b bg-background px-3 py-2">
+        {onBack && (
+          <Button variant="ghost" size="icon" className="size-8 shrink-0" onClick={onBack}>
+            <ArrowLeft className="size-4" />
+          </Button>
+        )}
+
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {isLoading ? (
+            <Skeleton className="h-5 w-40" />
+          ) : (
+            <span className="truncate text-sm font-medium">{title ?? untitledLabel}</span>
+          )}
+          {agentLabel && (
+            <Badge variant="secondary" className="shrink-0 text-xs">
+              {agentLabel}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex shrink-0 items-center gap-1">
+          {actionsExtra}
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <MoreHorizontal className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleRenameClick}>
+                <Pencil className="mr-2 size-4" />
+                {renameLabel}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={onExport}>
+                <Download className="mr-2 size-4" />
+                {exportLabel}
+              </DropdownMenuItem>
+              {menuItemsExtra}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 className="mr-2 size-4" />
+                {deleteLabel}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {afterBar}
+
+      <RenameDialog
+        open={renameOpen}
+        onOpenChange={setRenameOpen}
+        value={renameValue}
+        onValueChange={setRenameValue}
+        onConfirm={handleRenameConfirm}
+        isPending={isPendingRename}
+      />
+
+      <DeleteDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        onConfirm={handleDeleteConfirm}
+        isPending={isPendingDelete}
+      />
+    </div>
+  );
+}
+
+export { ConversationBar };
+export type { ConversationBarProps };

package/src/conversations/ConversationList.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { MessageSquare, Plus, Search } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { CollapsibleGroup } from "./CollapsibleGroup.js";
+import { ConversationListItem } from "./ConversationListItem.js";
+import type { Conversation } from "./types.js";
+import { groupConversations } from "./utils.js";
+
+interface ConversationListProps {
+  conversations: Conversation[];
+  activeId?: string;
+  isLoading?: boolean;
+
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+
+  favorites?: Conversation[];
+  history?: Conversation[];
+  favoritesLabel?: string;
+  historyLabel?: string;
+
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  loadMoreLabel?: string;
+  remainingCount?: number;
+
+  onSelect?: (id: string) => void;
+  onRename?: (id: string, title: string) => void;
+  onStar?: (id: string, starred: boolean) => void;
+  onCreateRequest?: () => void;
+
+  getAgentLabel?: (agentId: string) => string;
+
+  headerExtra?: React.ReactNode;
+  filterExtra?: React.ReactNode;
+  itemBadgesExtra?: (conv: Conversation) => React.ReactNode;
+
+  emptyIcon?: React.ReactNode;
+  emptyTitle?: string;
+  emptyDescription?: string;
+
+  className?: string;
+}
+
+function ConversationList({
+  conversations,
+  activeId,
+  isLoading = false,
+  search = "",
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  favorites: favoritesProp,
+  history: historyProp,
+  favoritesLabel = "Favorites",
+  historyLabel = "History",
+  hasMore = false,
+  onLoadMore,
+  loadMoreLabel = "Load more",
+  remainingCount,
+  onSelect,
+  onRename,
+  onStar,
+  onCreateRequest,
+  getAgentLabel,
+  headerExtra,
+  filterExtra,
+  itemBadgesExtra,
+  emptyIcon,
+  emptyTitle = "No conversations",
+  emptyDescription = "Start a conversation to begin.",
+  className,
+}: ConversationListProps) {
+  const [renamingId, setRenamingId] = React.useState<string | null>(null);
+  const [renameValue, setRenameValue] = React.useState("");
+  const [favoritesOpen, setFavoritesOpen] = React.useState(true);
+  const [historyOpen, setHistoryOpen] = React.useState(true);
+
+  const derived = React.useMemo(
+    () => groupConversations(conversations),
+    [conversations],
+  );
+  const favorites = favoritesProp ?? derived.favorites;
+  const history = historyProp ?? derived.history;
+
+  function handleStartRename(conv: Conversation) {
+    return (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setRenamingId(conv.id);
+      setRenameValue(conv.title ?? "");
+    };
+  }
+
+  function handleRenameCommit(id: string) {
+    if (renameValue.trim()) {
+      onRename?.(id, renameValue.trim());
+    }
+    setRenamingId(null);
+    setRenameValue("");
+  }
+
+  function handleRenameCancel() {
+    setRenamingId(null);
+    setRenameValue("");
+  }
+
+  function renderItem(conv: Conversation) {
+    return (
+      <ConversationListItem
+        key={conv.id}
+        conversation={conv}
+        agentLabel={getAgentLabel?.(conv.agentId)}
+        isActive={conv.id === activeId}
+        isRenaming={renamingId === conv.id}
+        renameValue={renameValue}
+        onRenameChange={setRenameValue}
+        onRenameCommit={() => handleRenameCommit(conv.id)}
+        onRenameCancel={handleRenameCancel}
+        onStartRename={handleStartRename(conv)}
+        onToggleStar={(e) => {
+          e.stopPropagation();
+          onStar?.(conv.id, !conv.starred);
+        }}
+        onClick={() => onSelect?.(conv.id)}
+        badgesExtra={itemBadgesExtra?.(conv)}
+      />
+    );
+  }
+
+  const isEmpty = !isLoading && conversations.length === 0;
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      {/* Header row */}
+      <div className="flex items-center gap-1 px-2 py-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            className="h-8 pl-7 text-sm"
+            placeholder={searchPlaceholder}
+            value={search}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+          />
+        </div>
+        {headerExtra}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0"
+          onClick={onCreateRequest}
+          aria-label="New conversation"
+        >
+          <Plus className="size-4" />
+        </Button>
+      </div>
+
+      {/* Filter row */}
+      {filterExtra && <div className="px-2 pb-2">{filterExtra}</div>}
+
+      {/* Content */}
+      <ScrollArea className="flex-1">
+        <div className="px-2 pb-2">
+          {isLoading && (
+            <div className="flex flex-col gap-2 pt-1">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <Skeleton key={i} className="h-16 w-full rounded-lg" />
+              ))}
+            </div>
+          )}
+
+          {isEmpty && (
+            <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+              {emptyIcon ?? <MessageSquare className="size-10 text-muted-foreground/50" />}
+              <p className="text-sm font-medium text-foreground">{emptyTitle}</p>
+              <p className="text-xs text-muted-foreground">{emptyDescription}</p>
+            </div>
+          )}
+
+          {!isLoading && !isEmpty && (
+            <>
+              {favorites.length > 0 && (
+                <CollapsibleGroup
+                  label={favoritesLabel}
+                  open={favoritesOpen}
+                  onToggle={() => setFavoritesOpen((v) => !v)}
+                >
+                  <div className="mt-0.5 flex flex-col gap-0.5">
+                    {favorites.map(renderItem)}
+                  </div>
+                </CollapsibleGroup>
+              )}
+
+              {history.length > 0 && (
+                <CollapsibleGroup
+                  label={historyLabel}
+                  open={historyOpen}
+                  onToggle={() => setHistoryOpen((v) => !v)}
+                >
+                  <div className="mt-0.5 flex flex-col gap-0.5">
+                    {history.map(renderItem)}
+                  </div>
+
+                  {hasMore && (
+                    <button
+                      className="mt-1 w-full rounded-md py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+                      onClick={onLoadMore}
+                    >
+                      {loadMoreLabel}
+                      {remainingCount != null && remainingCount > 0 && (
+                        <span className="ml-1 text-muted-foreground">
+                          ({remainingCount} remaining)
+                        </span>
+                      )}
+                    </button>
+                  )}
+                </CollapsibleGroup>
+              )}
+            </>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+export { ConversationList };
+export type { ConversationListProps };