react-virtual in messages list

2026-02-20 23:36:56 +00:00
parent 68c7973281
commit f089a89eae
7 changed files with 1836 additions and 31 deletions
@@ -1,4 +1,49 @@
+import { MessageSquare } from 'lucide-react';
+import { useChatSessions } from '@/state/useChatSessions';
+
 export const ChatList = () => {
-  return <h1>ChatList</h1>;
+  const { sessions } = useChatSessions();
+
+  if (sessions.length === 0) {
+    return (
+      <div className="h-full flex items-center justify-center text-duck-dark/30 dark:text-foreground/30 text-sm">
+        No sessions yet. Start a new chat!
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5 p-3">
+      {sessions.map((session) => (
+        <a
+          key={session.id}
+          href={`/chat/${session.id}`}
+          className="block p-3 rounded-lg border border-duck-dark/10 dark:border-foreground/10 hover:bg-duck-teal/5 dark:hover:bg-duck-teal/10 transition-colors group"
+        >
+          <div className="flex items-start gap-2 min-w-0">
+            <MessageSquare className="h-4 w-4 shrink-0 text-duck-teal/60 mt-0.5" />
+            <div className="min-w-0 flex-1">
+              <div className="text-sm font-medium text-duck-dark/80 dark:text-foreground/80 truncate">
+                {session.title}
+              </div>
+              <div className="text-xs text-duck-dark/40 dark:text-foreground/40">
+                {new Date(session.createdAt).toLocaleDateString(undefined, {
+                  month: 'short',
+                  day: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </div>
+              {session.model && (
+                <div className="text-xs text-duck-teal/70 dark:text-duck-teal/60 truncate">
+                  {session.model.includes('/') ? session.model.replace('/', ' - ') : session.model}
+                </div>
+              )}
+            </div>
+          </div>
+        </a>
+      ))}
+    </div>
+  );
 };

@@ -1 +1,6 @@
-export {};
+export { ChatPanel } from './ChatPanel';
+export { EmbeddableChat, type Attachment } from './EmbeddableChat';
+export { InputArea } from './InputArea';
+export { Settings } from './Settings';
+export { usePi } from './usePi';
+export { ChatList } from './ChatList';