thepopebot 1.1.2 → 1.2.3

package/lib/chat/components/chat-input.jsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon } from './icons.js';
+import { cn } from '../utils.js';
+
+const ACCEPTED_TYPES = [
+  'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+  'application/pdf',
+  'text/plain', 'text/markdown', 'text/csv', 'text/html', 'text/css',
+  'text/javascript', 'text/x-python', 'text/x-typescript',
+  'application/json',
+];
+
+const MAX_FILES = 5;
+
+function isAcceptedType(file) {
+  if (ACCEPTED_TYPES.includes(file.type)) return true;
+  // Fall back to extension for files with generic MIME types
+  const ext = file.name?.split('.').pop()?.toLowerCase();
+  const textExts = ['txt', 'md', 'csv', 'json', 'js', 'ts', 'jsx', 'tsx', 'py', 'html', 'css', 'yml', 'yaml', 'xml', 'sh', 'bash', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp'];
+  return textExts.includes(ext);
+}
+
+function getEffectiveType(file) {
+  if (ACCEPTED_TYPES.includes(file.type) && file.type !== '') return file.type;
+  const ext = file.name?.split('.').pop()?.toLowerCase();
+  const extMap = {
+    txt: 'text/plain', md: 'text/markdown', csv: 'text/csv',
+    json: 'application/json', js: 'text/javascript', ts: 'text/x-typescript',
+    jsx: 'text/javascript', tsx: 'text/x-typescript', py: 'text/x-python',
+    html: 'text/html', css: 'text/css', yml: 'text/plain', yaml: 'text/plain',
+    xml: 'text/plain', sh: 'text/plain', bash: 'text/plain', rb: 'text/plain',
+    go: 'text/plain', rs: 'text/plain', java: 'text/plain', c: 'text/plain',
+    cpp: 'text/plain', h: 'text/plain', hpp: 'text/plain',
+  };
+  return extMap[ext] || file.type || 'text/plain';
+}
+
+export function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles }) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isStreaming = status === 'streaming' || status === 'submitted';
+
+  // Auto-resize textarea
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }, []);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [input, adjustHeight]);
+
+  // Focus textarea on mount
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const handleFiles = useCallback((fileList) => {
+    const newFiles = Array.from(fileList).filter(isAcceptedType);
+    if (newFiles.length === 0) return;
+
+    // Read files outside state updater to avoid React strict mode double-invocation
+    newFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFiles((current) => {
+          if (current.length >= MAX_FILES) return current;
+          return [...current, { file, previewUrl: reader.result }];
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }, [setFiles]);
+
+  const removeFile = (index) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    if ((!input.trim() && files.length === 0) || isStreaming) return;
+    onSubmit();
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer?.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+
+  const canSend = input.trim() || files.length > 0;
+
+  return (
+    <div className="mx-auto w-full max-w-4xl px-2 pb-4 md:px-4">
+      <form onSubmit={handleSubmit} className="relative">
+        <div
+          className={cn(
+            'flex flex-col rounded-xl border bg-muted p-2 transition-colors',
+            isDragging ? 'border-primary bg-primary/5' : 'border-border'
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {/* File preview strip */}
+          {files.length > 0 && (
+            <div className="mb-2 flex gap-2 overflow-x-auto px-1 py-1">
+              {files.map((f, i) => {
+                const isImage = f.file.type.startsWith('image/');
+                return (
+                  <div key={i} className="group relative flex-shrink-0">
+                    {isImage ? (
+                      <img
+                        src={f.previewUrl}
+                        alt={f.file.name}
+                        className="h-16 w-16 rounded-lg object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-16 items-center gap-1.5 rounded-lg bg-foreground/10 px-3">
+                        <FileTextIcon size={14} />
+                        <span className="max-w-[100px] truncate text-xs">
+                          {f.file.name}
+                        </span>
+                      </div>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => removeFile(i)}
+                      className="absolute -right-1.5 -top-1.5 hidden rounded-full bg-foreground p-0.5 text-background group-hover:flex items-center justify-center"
+                      aria-label={`Remove ${f.file.name}`}
+                    >
+                      <XIcon size={10} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          <div className="flex items-end gap-2">
+            {/* Paperclip button */}
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className="inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:text-foreground"
+              aria-label="Attach files"
+              disabled={isStreaming}
+            >
+              <PaperclipIcon size={16} />
+            </button>
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept="image/*,application/pdf,text/*,application/json,.md,.csv,.json,.js,.ts,.jsx,.tsx,.py,.html,.css,.yml,.yaml,.xml,.sh,.rb,.go,.rs,.java,.c,.cpp,.h"
+              className="hidden"
+              onChange={(e) => {
+                if (e.target.files?.length) handleFiles(e.target.files);
+                e.target.value = '';
+              }}
+            />
+
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Send a message..."
+              rows={1}
+              className={cn(
+                'flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none',
+                'max-h-[200px]'
+              )}
+              disabled={isStreaming}
+            />
+
+            {isStreaming ? (
+              <button
+                type="button"
+                onClick={stop}
+                className="inline-flex items-center justify-center rounded-lg bg-foreground p-2 text-background hover:opacity-80"
+                aria-label="Stop generating"
+              >
+                <StopIcon size={16} />
+              </button>
+            ) : (
+              <button
+                type="submit"
+                disabled={!canSend}
+                className={cn(
+                  'inline-flex items-center justify-center rounded-lg p-2',
+                  canSend
+                    ? 'bg-foreground text-background hover:opacity-80'
+                    : 'bg-muted-foreground/20 text-muted-foreground cursor-not-allowed'
+                )}
+                aria-label="Send message"
+              >
+                <SendIcon size={16} />
+              </button>
+            )}
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

package/lib/chat/components/chat-nav-context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+const ChatNavContext = createContext(null);
+const ChatNavProvider = ChatNavContext.Provider;
+function useChatNav() {
+  return useContext(ChatNavContext);
+}
+export {
+  ChatNavProvider,
+  useChatNav
+};

package/lib/chat/components/chat-nav-context.jsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+const ChatNavContext = createContext(null);
+
+export const ChatNavProvider = ChatNavContext.Provider;
+
+export function useChatNav() {
+  return useContext(ChatNavContext);
+}

package/lib/chat/components/chat-page.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { AppSidebar } from "./app-sidebar.js";
+import { Chat } from "./chat.js";
+import { SidebarProvider, SidebarInset } from "./ui/sidebar.js";
+import { ChatNavProvider } from "./chat-nav-context.js";
+import { getChatMessages } from "../actions.js";
+function ChatPage({ session, needsSetup, chatId }) {
+  const [activeChatId, setActiveChatId] = useState(chatId || null);
+  const [resolvedChatId, setResolvedChatId] = useState(() => chatId ? null : crypto.randomUUID());
+  const [initialMessages, setInitialMessages] = useState([]);
+  const navigateToChat = useCallback((id) => {
+    if (id) {
+      window.history.pushState({}, "", `/chat/${id}`);
+    } else {
+      window.history.pushState({}, "", "/");
+    }
+    setActiveChatId(id);
+  }, []);
+  useEffect(() => {
+    const onPopState = () => {
+      const match = window.location.pathname.match(/^\/chat\/(.+)/);
+      setActiveChatId(match ? match[1] : null);
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  useEffect(() => {
+    if (activeChatId) {
+      getChatMessages(activeChatId).then((dbMessages) => {
+        if (dbMessages.length === 0) {
+          setInitialMessages([]);
+          setResolvedChatId(crypto.randomUUID());
+          window.history.replaceState({}, "", "/");
+          return;
+        }
+        const uiMessages = dbMessages.map((msg) => ({
+          id: msg.id,
+          role: msg.role,
+          content: msg.content,
+          parts: [{ type: "text", text: msg.content }],
+          createdAt: new Date(msg.createdAt)
+        }));
+        setInitialMessages(uiMessages);
+        setResolvedChatId(activeChatId);
+      });
+    } else {
+      setInitialMessages([]);
+      setResolvedChatId(crypto.randomUUID());
+    }
+  }, [activeChatId]);
+  if (needsSetup || !session) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ChatNavProvider, { value: { activeChatId: resolvedChatId, navigateToChat }, children: /* @__PURE__ */ jsxs(SidebarProvider, { children: [
+    /* @__PURE__ */ jsx(AppSidebar, { user: session.user }),
+    /* @__PURE__ */ jsx(SidebarInset, { children: resolvedChatId && /* @__PURE__ */ jsx(
+      Chat,
+      {
+        chatId: resolvedChatId,
+        initialMessages
+      },
+      resolvedChatId
+    ) })
+  ] }) });
+}
+export {
+  ChatPage
+};

package/lib/chat/components/chat-page.jsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { AppSidebar } from './app-sidebar.js';
+import { Chat } from './chat.js';
+import { SidebarProvider, SidebarInset } from './ui/sidebar.js';
+import { ChatNavProvider } from './chat-nav-context.js';
+import { getChatMessages } from '../actions.js';
+
+/**
+ * Main chat page component.
+ *
+ * @param {object} props
+ * @param {object|null} props.session - Auth session (null = not logged in)
+ * @param {boolean} props.needsSetup - Whether setup is needed
+ * @param {string} [props.chatId] - Chat ID from URL (only used for initial mount)
+ */
+export function ChatPage({ session, needsSetup, chatId }) {
+  const [activeChatId, setActiveChatId] = useState(chatId || null);
+  const [resolvedChatId, setResolvedChatId] = useState(() => chatId ? null : crypto.randomUUID());
+  const [initialMessages, setInitialMessages] = useState([]);
+
+  const navigateToChat = useCallback((id) => {
+    if (id) {
+      window.history.pushState({}, '', `/chat/${id}`);
+    } else {
+      window.history.pushState({}, '', '/');
+    }
+    setActiveChatId(id);
+  }, []);
+
+  // Browser back/forward
+  useEffect(() => {
+    const onPopState = () => {
+      const match = window.location.pathname.match(/^\/chat\/(.+)/);
+      setActiveChatId(match ? match[1] : null);
+    };
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  // Load messages when activeChatId changes
+  useEffect(() => {
+    if (activeChatId) {
+      getChatMessages(activeChatId).then((dbMessages) => {
+        if (dbMessages.length === 0) {
+          // Stale chat (e.g. after login with old UUID) — start fresh
+          setInitialMessages([]);
+          setResolvedChatId(crypto.randomUUID());
+          window.history.replaceState({}, '', '/');
+          return;
+        }
+        const uiMessages = dbMessages.map((msg) => ({
+          id: msg.id,
+          role: msg.role,
+          content: msg.content,
+          parts: [{ type: 'text', text: msg.content }],
+          createdAt: new Date(msg.createdAt),
+        }));
+        setInitialMessages(uiMessages);
+        setResolvedChatId(activeChatId);
+      });
+    } else {
+      setInitialMessages([]);
+      setResolvedChatId(crypto.randomUUID());
+    }
+  }, [activeChatId]);
+
+  if (needsSetup || !session) {
+    return null;
+  }
+
+  return (
+    <ChatNavProvider value={{ activeChatId: resolvedChatId, navigateToChat }}>
+      <SidebarProvider>
+        <AppSidebar user={session.user} />
+        <SidebarInset>
+          {resolvedChatId && (
+            <Chat
+              key={resolvedChatId}
+              chatId={resolvedChatId}
+              initialMessages={initialMessages}
+            />
+          )}
+        </SidebarInset>
+      </SidebarProvider>
+    </ChatNavProvider>
+  );
+}

package/lib/chat/components/chat.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState, useEffect, useRef, useMemo } from "react";
+import { Messages } from "./messages.js";
+import { ChatInput } from "./chat-input.js";
+import { ChatHeader } from "./chat-header.js";
+function Chat({ chatId, initialMessages = [] }) {
+  const [input, setInput] = useState("");
+  const [files, setFiles] = useState([]);
+  const hasNavigated = useRef(false);
+  const transport = useMemo(
+    () => new DefaultChatTransport({
+      api: "/api/chat",
+      body: { chatId }
+    }),
+    [chatId]
+  );
+  const {
+    messages,
+    status,
+    stop,
+    error,
+    sendMessage
+  } = useChat({
+    id: chatId,
+    messages: initialMessages,
+    transport,
+    onError: (err) => console.error("Chat error:", err)
+  });
+  useEffect(() => {
+    if (!hasNavigated.current && messages.length >= 2 && !window.location.pathname.includes(chatId)) {
+      hasNavigated.current = true;
+      window.history.replaceState({}, "", `/chat/${chatId}`);
+      window.dispatchEvent(new Event("chatsupdated"));
+      setTimeout(() => window.dispatchEvent(new Event("chatsupdated")), 5e3);
+    }
+  }, [messages.length, chatId]);
+  const handleSend = () => {
+    if (!input.trim() && files.length === 0) return;
+    const text = input;
+    const currentFiles = files;
+    setInput("");
+    setFiles([]);
+    if (currentFiles.length === 0) {
+      sendMessage({ text });
+    } else {
+      const fileParts = currentFiles.map((f) => ({
+        type: "file",
+        mediaType: f.file.type || "text/plain",
+        url: f.previewUrl,
+        filename: f.file.name
+      }));
+      sendMessage({ text: text || void 0, files: fileParts });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-svh flex-col", children: [
+    /* @__PURE__ */ jsx(ChatHeader, { chatId }),
+    /* @__PURE__ */ jsx(Messages, { messages, status }),
+    error && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 md:px-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }) }),
+    /* @__PURE__ */ jsx(
+      ChatInput,
+      {
+        input,
+        setInput,
+        onSubmit: handleSend,
+        status,
+        stop,
+        files,
+        setFiles
+      }
+    )
+  ] });
+}
+export {
+  Chat
+};

package/lib/chat/components/chat.jsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Messages } from './messages.js';
+import { ChatInput } from './chat-input.js';
+import { ChatHeader } from './chat-header.js';
+
+export function Chat({ chatId, initialMessages = [] }) {
+  const [input, setInput] = useState('');
+  const [files, setFiles] = useState([]);
+  const hasNavigated = useRef(false);
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: '/api/chat',
+        body: { chatId },
+      }),
+    [chatId]
+  );
+
+  const {
+    messages,
+    status,
+    stop,
+    error,
+    sendMessage,
+  } = useChat({
+    id: chatId,
+    messages: initialMessages,
+    transport,
+    onError: (err) => console.error('Chat error:', err),
+  });
+
+  // After first exchange, update URL and notify sidebar
+  useEffect(() => {
+    if (!hasNavigated.current && messages.length >= 2 && !window.location.pathname.includes(chatId)) {
+      hasNavigated.current = true;
+      window.history.replaceState({}, '', `/chat/${chatId}`);
+      window.dispatchEvent(new Event('chatsupdated'));
+      // Dispatch again after delay to pick up async title update
+      setTimeout(() => window.dispatchEvent(new Event('chatsupdated')), 5000);
+    }
+  }, [messages.length, chatId]);
+
+  const handleSend = () => {
+    if (!input.trim() && files.length === 0) return;
+    const text = input;
+    const currentFiles = files;
+    setInput('');
+    setFiles([]);
+
+    if (currentFiles.length === 0) {
+      sendMessage({ text });
+    } else {
+      // Build FileUIPart[] from pre-read data URLs (File[] isn't a valid type)
+      const fileParts = currentFiles.map((f) => ({
+        type: 'file',
+        mediaType: f.file.type || 'text/plain',
+        url: f.previewUrl,
+        filename: f.file.name,
+      }));
+      sendMessage({ text: text || undefined, files: fileParts });
+    }
+  };
+
+  return (
+    <div className="flex h-svh flex-col">
+      <ChatHeader chatId={chatId} />
+      <Messages messages={messages} status={status} />
+      {error && (
+        <div className="mx-auto w-full max-w-4xl px-2 md:px-4">
+          <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+            {error.message || 'Something went wrong. Please try again.'}
+          </div>
+        </div>
+      )}
+      <ChatInput
+        input={input}
+        setInput={setInput}
+        onSubmit={handleSend}
+        status={status}
+        stop={stop}
+        files={files}
+        setFiles={setFiles}
+      />
+    </div>
+  );
+}