@useatlas/react 0.0.1

package/src/components/conversations/conversation-item.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { Star, Trash2 } from "lucide-react";
+import { Button } from "../ui/button";
+import type { Conversation } from "../../lib/types";
+import { DeleteConfirmation } from "./delete-confirmation";
+
+function relativeTime(dateStr: string): string {
+  const then = new Date(dateStr).getTime();
+  if (isNaN(then)) return "";
+  const now = Date.now();
+  const diff = now - then;
+
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 1) return "just now";
+  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);
+  if (days < 7) return `${days}d ago`;
+
+  return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+export function ConversationItem({
+  conversation,
+  isActive,
+  onSelect,
+  onDelete,
+  onStar,
+}: {
+  conversation: Conversation;
+  isActive: boolean;
+  onSelect: () => void;
+  onDelete: () => Promise<boolean>;
+  onStar: (starred: boolean) => Promise<boolean>;
+}) {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [starPending, setStarPending] = useState(false);
+
+  if (confirmDelete) {
+    return (
+      <div className="rounded-lg border border-red-200 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/10">
+        <DeleteConfirmation
+          onCancel={() => setConfirmDelete(false)}
+          onConfirm={async () => {
+            setDeleting(true);
+            try {
+              const success = await onDelete();
+              if (success) {
+                setConfirmDelete(false);
+              }
+            } catch (err) {
+              console.warn("Failed to delete conversation:", err);
+            } finally {
+              setDeleting(false);
+            }
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onSelect}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+      className={`group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-left text-sm transition-colors ${
+        isActive
+          ? "bg-blue-50 text-blue-700 dark:bg-blue-600/10 dark:text-blue-400"
+          : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+      }`}
+    >
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">
+          {conversation.title || "New conversation"}
+        </p>
+        <p className="text-xs text-zinc-400 dark:text-zinc-500">
+          {relativeTime(conversation.updatedAt)}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-0.5">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={async (e) => {
+            e.stopPropagation();
+            if (starPending) return;
+            setStarPending(true);
+            try {
+              await onStar(!conversation.starred);
+            } catch (err) {
+              console.warn("Failed to update star:", err);
+            } finally {
+              setStarPending(false);
+            }
+          }}
+          disabled={starPending}
+          className={`size-8 transition-all ${
+            conversation.starred
+              ? "text-amber-400 opacity-100 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
+              : "text-zinc-400 opacity-0 hover:text-amber-400 group-hover:opacity-100 dark:hover:text-amber-400"
+          } ${starPending ? "opacity-50" : ""}`}
+          aria-label={conversation.starred ? "Unstar conversation" : "Star conversation"}
+        >
+          <Star className="h-3.5 w-3.5" fill={conversation.starred ? "currentColor" : "none"} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={(e) => {
+            e.stopPropagation();
+            setConfirmDelete(true);
+          }}
+          disabled={deleting}
+          className="size-8 shrink-0 text-zinc-400 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400"
+          aria-label="Delete conversation"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/conversations/conversation-list.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import type { Conversation } from "../../lib/types";
+import { ConversationItem } from "./conversation-item";
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+  onDelete,
+  onStar,
+  showSections = true,
+  emptyMessage,
+}: {
+  conversations: Conversation[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => Promise<boolean>;
+  onStar: (id: string, starred: boolean) => Promise<boolean>;
+  showSections?: boolean;
+  emptyMessage?: string;
+}) {
+  if (conversations.length === 0) {
+    return (
+      <div className="px-3 py-6 text-center text-xs text-zinc-400 dark:text-zinc-500">
+        {emptyMessage ?? "No conversations yet"}
+      </div>
+    );
+  }
+
+  function renderItems(items: Conversation[]) {
+    return items.map((c) => (
+      <ConversationItem
+        key={c.id}
+        conversation={c}
+        isActive={c.id === selectedId}
+        onSelect={() => onSelect(c.id)}
+        onDelete={() => onDelete(c.id)}
+        onStar={(s) => onStar(c.id, s)}
+      />
+    ));
+  }
+
+  if (!showSections) {
+    return <div className="space-y-1">{renderItems(conversations)}</div>;
+  }
+
+  const starred = conversations.filter((c) => c.starred);
+  const unstarred = conversations.filter((c) => !c.starred);
+
+  return (
+    <div className="space-y-1">
+      {starred.length > 0 && (
+        <>
+          <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+            Starred
+          </div>
+          {renderItems(starred)}
+          {unstarred.length > 0 && (
+            <div className="px-3 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+              Recent
+            </div>
+          )}
+        </>
+      )}
+      {renderItems(unstarred)}
+    </div>
+  );
+}

package/src/components/conversations/conversation-sidebar.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { Star } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
+import { Badge } from "../ui/badge";
+import type { Conversation } from "../../lib/types";
+import { ConversationList } from "./conversation-list";
+
+type SidebarFilter = "all" | "saved";
+
+export function ConversationSidebar({
+  conversations,
+  selectedId,
+  loading,
+  onSelect,
+  onDelete,
+  onStar,
+  onNewChat,
+  mobileOpen,
+  onMobileClose,
+}: {
+  conversations: Conversation[];
+  selectedId: string | null;
+  loading: boolean;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => Promise<boolean>;
+  onStar: (id: string, starred: boolean) => Promise<boolean>;
+  onNewChat: () => void;
+  mobileOpen: boolean;
+  onMobileClose: () => void;
+}) {
+  const [filter, setFilter] = useState<SidebarFilter>("all");
+  const starredConversations = conversations.filter((c) => c.starred);
+  const filteredConversations = filter === "saved" ? starredConversations : conversations;
+
+  const sidebar = (
+    <div className="flex h-full flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="flex items-center justify-between border-b border-zinc-200 px-3 py-3 dark:border-zinc-800">
+        <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">History</span>
+        <button
+          onClick={onNewChat}
+          className="rounded-lg border border-zinc-200 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+        >
+          + New
+        </button>
+      </div>
+
+      <div className="border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
+        <ToggleGroup
+          type="single"
+          size="sm"
+          value={filter}
+          onValueChange={(val) => { if (val) setFilter(val as SidebarFilter); }}
+          className="gap-1"
+        >
+          <ToggleGroupItem value="all" className="px-2.5 text-xs">
+            All
+          </ToggleGroupItem>
+          <ToggleGroupItem value="saved" className="gap-1.5 px-2.5 text-xs">
+            <Star className="h-3 w-3" fill={filter === "saved" ? "currentColor" : "none"} />
+            Saved
+            {starredConversations.length > 0 && (
+              <Badge variant="secondary" className="h-4 px-1.5 text-[10px] font-semibold">
+                {starredConversations.length}
+              </Badge>
+            )}
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2">
+        {loading && conversations.length === 0 ? (
+          <div className="flex items-center justify-center py-8">
+            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600 dark:border-zinc-600 dark:border-t-zinc-300" />
+          </div>
+        ) : (
+          <ConversationList
+            conversations={filteredConversations}
+            selectedId={selectedId}
+            onSelect={onSelect}
+            onDelete={onDelete}
+            onStar={onStar}
+            showSections={filter === "all"}
+            emptyMessage={filter === "saved" ? "Star conversations to save them here" : undefined}
+          />
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <div className="hidden w-[280px] shrink-0 md:block">
+        {sidebar}
+      </div>
+
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/30 md:hidden"
+            onClick={onMobileClose}
+          />
+          <div className="fixed inset-y-0 left-0 z-50 w-[280px] md:hidden">
+            {sidebar}
+          </div>
+        </>
+      )}
+    </>
+  );
+}

package/src/components/conversations/delete-confirmation.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export function DeleteConfirmation({
+  onConfirm,
+  onCancel,
+}: {
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 text-xs">
+      <span className="text-zinc-500 dark:text-zinc-400">Delete?</span>
+      <button
+        onClick={onCancel}
+        className="rounded px-2 py-0.5 text-zinc-500 transition-colors hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+      >
+        Cancel
+      </button>
+      <button
+        onClick={onConfirm}
+        className="rounded bg-red-600 px-2 py-0.5 text-white transition-colors hover:bg-red-500"
+      >
+        Delete
+      </button>
+    </div>
+  );
+}