tower-studio 0.1.1 → 0.1.3

package/src/components/assistant/assistant-chat-bubble.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Bot, Check, ChevronRight, Copy, ImageOff, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
+import type { ChatMessage } from "@/hooks/use-assistant-chat";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface AssistantChatBubbleProps {
+  message: ChatMessage;
+  onImagePreview?: (url: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// CopyButton — hover-visible copy action
+// ---------------------------------------------------------------------------
+
+function CopyButton({ text, className }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  const { t } = useI18n();
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        document.body.removeChild(ta);
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Silent fail
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      onClick={handleCopy}
+      className={`text-muted-foreground ${className ?? ""}`}
+      aria-label={t("assistant.copy")}
+    >
+      {copied ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
+    </Button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MessageImage sub-component
+// ---------------------------------------------------------------------------
+
+function MessageImage({
+  filename,
+  onPreview,
+}: {
+  filename: string;
+  onPreview?: (url: string) => void;
+}) {
+  const { t } = useI18n();
+  const [broken, setBroken] = useState(false);
+  const url = `/api/internal/cache/${filename}`;
+
+  if (broken) {
+    return (
+      <div
+        className="size-16 rounded-md bg-muted flex items-center justify-center"
+        title={t("assistant.brokenImage")}
+      >
+        <ImageOff className="size-4 text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className="relative size-16 rounded-md overflow-hidden bg-muted shrink-0"
+      onClick={() => onPreview?.(url)}
+    >
+      <img
+        src={url}
+        alt=""
+        loading="lazy"
+        className="size-16 rounded-md object-cover cursor-pointer hover:opacity-80 transition-opacity"
+        onError={() => setBroken(true)}
+      />
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// User bubble
+// ---------------------------------------------------------------------------
+
+function UserBubble({
+  content,
+  imageFilenames,
+  onImagePreview,
+}: {
+  content: string;
+  imageFilenames?: string[];
+  onImagePreview?: (url: string) => void;
+}) {
+  return (
+    <div
+      className="flex justify-end gap-2 animate-in fade-in slide-in-from-bottom-2 duration-200"
+      aria-label="You"
+    >
+      <div className="bg-primary text-primary-foreground max-w-[80%] rounded-2xl rounded-br-sm px-3 py-2 text-sm whitespace-pre-wrap break-words">
+        {imageFilenames && imageFilenames.length > 0 && (
+          <div
+            className="flex flex-wrap gap-1.5 mb-2"
+            style={{ maxWidth: "calc(4 * 64px + 3 * 6px)" }}
+          >
+            {imageFilenames.map((filename) => (
+              <MessageImage
+                key={filename}
+                filename={filename}
+                onPreview={onImagePreview}
+              />
+            ))}
+          </div>
+        )}
+        {content}
+      </div>
+      <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted mt-1">
+        <User className="size-3.5 text-muted-foreground" />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Assistant bubble
+// ---------------------------------------------------------------------------
+
+function AssistantBubble({ content }: { content: string }) {
+  return (
+    <div
+      className="group/bubble flex justify-start gap-2 animate-in fade-in slide-in-from-bottom-2 duration-200"
+      aria-label="Assistant"
+    >
+      <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 mt-1">
+        <Bot className="size-3.5 text-primary" />
+      </div>
+      <div className="max-w-[85%]">
+        <div className="bg-muted text-foreground rounded-2xl rounded-bl-sm px-3 py-2">
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                code({ inline, className, children, ...props }: any) {
+                  if (inline) {
+                    return (
+                      <code
+                        className="bg-muted/80 px-1 rounded text-[13px] font-mono"
+                        {...props}
+                      >
+                        {children}
+                      </code>
+                    );
+                  }
+                  return (
+                    <code
+                      className="bg-muted rounded-md p-3 font-mono text-[13px] overflow-x-auto block"
+                      {...props}
+                    >
+                      {children}
+                    </code>
+                  );
+                },
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+          </div>
+        </div>
+        {/* Action bar — visible on hover */}
+        <div className="flex items-center gap-0.5 mt-0.5 opacity-0 group-hover/bubble:opacity-100 transition-opacity">
+          <CopyButton text={content} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Thinking bubble
+// ---------------------------------------------------------------------------
+
+function ThinkingBubble() {
+  const { t } = useI18n();
+  return (
+    <div
+      className="flex justify-start gap-2 animate-in fade-in slide-in-from-bottom-2 duration-200"
+      role="status"
+      aria-live="polite"
+      aria-label={t("assistant.thinking")}
+    >
+      <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 mt-1">
+        <Bot className="size-3.5 text-primary" />
+      </div>
+      <div className="bg-muted/50 text-muted-foreground max-w-[200px] rounded-2xl rounded-bl-sm px-3 py-2">
+        <div className="flex items-center gap-1">
+          <span
+            className="size-1.5 rounded-full bg-primary/60 animate-pulse"
+            style={{ animationDelay: "0ms" }}
+          />
+          <span
+            className="size-1.5 rounded-full bg-primary/60 animate-pulse"
+            style={{ animationDelay: "150ms" }}
+          />
+          <span
+            className="size-1.5 rounded-full bg-primary/60 animate-pulse"
+            style={{ animationDelay: "300ms" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tool-call bubble
+// ---------------------------------------------------------------------------
+
+function ToolBubble({ content, toolName }: { content: string; toolName?: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useI18n();
+  const displayName = toolName ?? t("assistant.toolLabel");
+
+  return (
+    <div className="group/tool flex justify-start gap-2 animate-in fade-in slide-in-from-bottom-2 duration-200">
+      {/* Spacer to align with assistant avatar */}
+      <div className="size-7 shrink-0" />
+      <div className="bg-muted/60 border border-border max-w-[90%] rounded-lg px-3 py-1">
+        {/* Header */}
+        <div
+          className="flex items-center gap-1.5 w-full text-left py-0.5 cursor-pointer"
+          onClick={() => setExpanded((v) => !v)}
+          role="button"
+          aria-expanded={expanded}
+          aria-label={t("assistant.expandTool")}
+        >
+          <ChevronRight
+            className={`h-3.5 w-3.5 text-muted-foreground shrink-0 transition-transform duration-150 ${
+              expanded ? "rotate-90" : ""
+            }`}
+          />
+          <span className="text-xs font-semibold text-foreground truncate">{displayName}</span>
+          <span className="flex-1" />
+          <CopyButton text={content} className="opacity-0 group-hover/tool:opacity-100" />
+          <span className="bg-muted text-muted-foreground text-[10px] px-1.5 rounded shrink-0">
+            {t("assistant.toolLabel")}
+          </span>
+        </div>
+
+        {/* Expanded body */}
+        {expanded && (
+          <div className="mt-1 border-t border-border pt-1">
+            <pre className="font-mono text-[12px] max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all text-muted-foreground">
+              {content}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+
+export function AssistantChatBubble({ message, onImagePreview }: AssistantChatBubbleProps) {
+  switch (message.role) {
+    case "user":
+      return (
+        <UserBubble
+          content={message.content}
+          imageFilenames={message.imageFilenames}
+          onImagePreview={onImagePreview}
+        />
+      );
+    case "assistant":
+      return <AssistantBubble content={message.content} />;
+    case "thinking":
+      return <ThinkingBubble />;
+    case "tool":
+      return <ToolBubble content={message.content} toolName={message.toolName} />;
+    default:
+      return null;
+  }
+}

package/src/components/assistant/assistant-chat.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Bot, ClipboardList, FolderPlus, Loader2, Search, SendHorizonal, Square, TrendingUp } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
+import { useAssistant } from "./assistant-provider";
+import { AssistantChatBubble } from "./assistant-chat-bubble";
+import { useImageUpload, type PendingImage } from "@/hooks/use-image-upload";
+import { ImageThumbnailStrip } from "./image-thumbnail-strip";
+import { ImagePreviewModal } from "./image-preview-modal";
+
+// ---------------------------------------------------------------------------
+// Main component — uses chat state from AssistantProvider (persists across routes)
+// ---------------------------------------------------------------------------
+
+export function AssistantChat() {
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const { t } = useI18n();
+
+  // Chat state lives in the provider — survives route changes
+  const {
+    chatMessages: messages,
+    isChatThinking: isThinking,
+    isLoadingHistory,
+    sendChatMessage: sendMessage,
+    cancelChat,
+  } = useAssistant();
+
+  const { pendingImages, addImages, removeImage, clearAll, hasUploading } = useImageUpload();
+  const [previewImage, setPreviewImage] = useState<PendingImage | null>(null);
+  const [messagePreviewUrl, setMessagePreviewUrl] = useState<string | null>(null);
+
+  // Auto-focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Auto-scroll on new messages or content growth
+  // First mount uses instant scroll (no animation on page switch), subsequent uses smooth
+  const mountedRef = useRef(false);
+  const lastContentLen = messages[messages.length - 1]?.content.length ?? 0;
+  useEffect(() => {
+    const behavior = mountedRef.current ? "smooth" : "instant";
+    messagesEndRef.current?.scrollIntoView({ behavior });
+    mountedRef.current = true;
+  }, [messages.length, lastContentLen]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const imageFiles: File[] = [];
+    const items = Array.from(e.clipboardData.items);
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+    if (imageFiles.length > 0) {
+      addImages(imageFiles);
+    }
+    // Do NOT call e.preventDefault() — text items still paste normally
+  }, [addImages]);
+
+  const handleSend = () => {
+    const text = inputValue.trim();
+    const doneFilenames = pendingImages
+      .filter((i) => i.status === "done")
+      .map((i) => i.filename!);
+
+    if (!text && doneFilenames.length === 0) return;
+    if (isThinking || hasUploading) return;
+
+    sendMessage(text, { imageFilenames: doneFilenames });
+    setInputValue("");
+    clearAll();
+    inputRef.current?.focus();
+  };
+
+  const handleCancel = () => {
+    const restored = cancelChat();
+    if (restored) {
+      setInputValue(restored);
+    }
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Ignore Enter during IME composition (e.g. Chinese input)
+    if (e.nativeEvent.isComposing) return;
+
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+    if (e.key === "Escape" && isThinking) {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+
+  const hasDoneImages = pendingImages.some((i) => i.status === "done");
+  const isSendDisabled =
+    (!inputValue.trim() && !hasDoneImages)
+    || isThinking
+    || hasUploading;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Message list */}
+      <ScrollArea className="flex-1 overflow-hidden">
+        <div
+          className={`flex flex-col gap-3 p-4 min-h-full ${isLoadingHistory || messages.length === 0 ? "justify-center" : ""}`}
+          role="log"
+          aria-live="polite"
+        >
+          {isLoadingHistory ? (
+            <div className="flex flex-col items-center justify-center gap-2">
+              <Loader2 className="size-5 animate-spin text-muted-foreground" />
+              <span className="text-xs text-muted-foreground">{t("assistant.loading")}</span>
+            </div>
+          ) : messages.length === 0 ? (
+            <div className="flex flex-col items-center gap-4 px-6">
+              <Bot className="size-8 text-muted-foreground/40" />
+              <h3 className="text-sm font-semibold text-foreground">{t("assistant.emptyTitle")}</h3>
+              <div className="grid grid-cols-1 gap-2 w-full max-w-[280px]">
+                {[
+                  { icon: FolderPlus, label: t("assistant.suggestion.createProject") },
+                  { icon: ClipboardList, label: t("assistant.suggestion.createTask") },
+                  { icon: Search, label: t("assistant.suggestion.checkProgress") },
+                  { icon: TrendingUp, label: t("assistant.suggestion.dailySummary") },
+                ].map(({ icon: Icon, label }) => (
+                  <Button
+                    key={label}
+                    variant="outline"
+                    className="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground text-left justify-start h-auto"
+                    onClick={() => { setInputValue(label); inputRef.current?.focus(); }}
+                  >
+                    <Icon className="size-3.5 shrink-0" />
+                    {label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          ) : (
+            messages.map((m) => (
+              <AssistantChatBubble
+                key={m.id}
+                message={m}
+                onImagePreview={(url) => setMessagePreviewUrl(url)}
+              />
+            ))
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+      </ScrollArea>
+
+      {/* Input area */}
+      <div className="border-t border-border bg-sidebar p-4">
+        <ImageThumbnailStrip
+          pendingImages={pendingImages}
+          onRemove={removeImage}
+          onPreview={(img) => setPreviewImage(img)}
+        />
+        <div className={`flex items-end gap-2 ${pendingImages.length > 0 ? "mt-2" : ""}`}>
+          <Textarea
+            ref={inputRef}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            placeholder={t("assistant.inputPlaceholder")}
+            className="flex-1 min-h-[72px] max-h-[120px] resize-none text-sm"
+            rows={3}
+          />
+          {isThinking ? (
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8 shrink-0 border-destructive/50 text-destructive transition-colors hover:bg-destructive/20 hover:text-destructive hover:border-destructive"
+              onClick={handleCancel}
+              aria-label={t("assistant.cancelLabel")}
+            >
+              <Square className="h-3 w-3 fill-current" />
+            </Button>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 shrink-0 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+              onClick={handleSend}
+              disabled={isSendDisabled}
+              aria-label={t("assistant.sendLabel")}
+            >
+              <SendHorizonal className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+      <ImagePreviewModal
+        imageUrl={previewImage?.blobUrl ?? null}
+        open={previewImage !== null}
+        onOpenChange={(open) => { if (!open) setPreviewImage(null); }}
+      />
+      <ImagePreviewModal
+        imageUrl={messagePreviewUrl}
+        open={messagePreviewUrl !== null}
+        onOpenChange={(open) => { if (!open) setMessagePreviewUrl(null); }}
+      />
+    </div>
+  );
+}

package/src/components/assistant/assistant-panel.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Bot, ChevronDown, Plus, Trash2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useAssistant } from "./assistant-provider";
+import { useI18n } from "@/lib/i18n";
+
+interface AssistantPanelProps {
+  mode: "sidebar" | "dialog";
+}
+
+const DynamicChat = dynamic(
+  () => import("./assistant-chat").then((m) => ({ default: m.AssistantChat })),
+  { ssr: false }
+);
+
+/**
+ * Format a date string as relative time (e.g. "2 hours ago").
+ */
+function formatRelativeTime(isoString: string): string {
+  const now = Date.now();
+  const then = new Date(isoString).getTime();
+  const diffMs = now - then;
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return `${diffSec}s ago`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  return `${diffDay}d ago`;
+}
+
+export function AssistantPanel({ mode }: AssistantPanelProps) {
+  const {
+    isOpen,
+    closeAssistant,
+    sessions,
+    activeSessionId,
+    createNewSession,
+    switchSession,
+    removeSession,
+  } = useAssistant();
+  const { t } = useI18n();
+
+  const containerClass =
+    mode === "sidebar"
+      ? "min-w-[320px] max-w-[480px] w-[30vw] shrink-0 border-r border-border flex flex-col bg-sidebar overflow-hidden"
+      : "flex flex-col h-full overflow-hidden";
+
+  const activeSession = sessions.find((s) => s.id === activeSessionId);
+  const activeTitle = activeSession?.title ?? t("assistant.newSession");
+
+  return (
+    <div className={containerClass}>
+      {/* Title bar */}
+      <div className="header-sm flex items-center px-4 gap-2 bg-sidebar">
+        <Bot className="h-4 w-4 text-muted-foreground shrink-0" />
+        <span className="text-sm font-semibold text-foreground shrink-0">{t("assistant.title")}</span>
+
+        <>
+          <div className="flex-1" />
+          {/* Session selector dropdown */}
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                className="flex items-center gap-1 h-8 px-2 rounded-md text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground max-w-[120px] truncate"
+                aria-label={t("assistant.sessionList")}
+              >
+                <span className="truncate">{activeTitle}</span>
+                <ChevronDown className="h-3 w-3 shrink-0" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="bottom" align="end" sideOffset={4}>
+                {sessions.length === 0 ? (
+                  <div className="px-2 py-4 text-xs text-muted-foreground text-center">
+                    {t("assistant.noSessions")}
+                  </div>
+                ) : (
+                  sessions.map((session) => (
+                    <DropdownMenuItem
+                      key={session.id}
+                      className="flex items-center justify-between gap-2 pr-1"
+                      onClick={() => switchSession(session.id)}
+                    >
+                      <div className="flex flex-col gap-0.5 min-w-0">
+                        <span className="text-xs truncate max-w-[140px]">{session.title}</span>
+                        <span className="text-[10px] text-muted-foreground">
+                          {formatRelativeTime(session.updatedAt)}
+                        </span>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        className="h-6 w-6 p-0 shrink-0 opacity-50 hover:opacity-100 hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          removeSession(session.id);
+                        }}
+                        aria-label={t("assistant.deleteSession")}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </DropdownMenuItem>
+                  ))
+                )}
+                {sessions.length > 0 && <DropdownMenuSeparator />}
+                <DropdownMenuItem onClick={createNewSession}>
+                  <Plus className="h-3 w-3 mr-1" />
+                  <span className="text-xs">{t("assistant.newSession")}</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* New session button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground"
+              onClick={createNewSession}
+              aria-label={t("assistant.newSession")}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-muted-foreground"
+          onClick={closeAssistant}
+          aria-label={t("assistant.closeLabel")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Body — chat only */}
+      <div className="flex-1 overflow-hidden">
+        {isOpen ? <DynamicChat /> : null}
+      </div>
+    </div>
+  );
+}