sonance-brand-mcp 1.3.110 → 1.3.111

package/dist/assets/dev-tools/components/ChatHistory.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React, { useRef, useEffect } from "react";
+import { User, Bot, AlertCircle, CheckCircle, RotateCcw } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ChatMessage } from "../types";
+import { InlineDiffPreview } from "./InlineDiffPreview";
+
+export interface ChatHistoryProps {
+  messages: ChatMessage[];
+  onAcceptChanges?: (messageId: string) => void;
+  onRevertChanges?: (messageId: string) => void;
+  visionMode?: boolean;
+}
+
+export function ChatHistory({
+  messages,
+  onAcceptChanges,
+  onRevertChanges,
+  visionMode = false,
+}: ChatHistoryProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Format timestamp
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+  if (messages.length === 0) {
+    return null; // Empty state is handled by parent
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      className="flex-1 overflow-y-auto px-3 py-4 space-y-4 bg-background"
+      style={{ overscrollBehavior: "contain" }}
+    >
+      {messages.map((message, index) => (
+        <div
+          key={message.id}
+          className={cn(
+            "flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2",
+            message.role === "system" && "justify-center"
+          )}
+          style={{ animationDelay: `${Math.min(index * 30, 150)}ms` }}
+        >
+          {/* Avatar */}
+          {message.role !== "system" && (
+            <div
+              className={cn(
+                "flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center",
+                message.role === "user"
+                  ? "bg-gradient-to-br from-[#00A3E1] to-[#0090c8]"
+                  : "bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700"
+              )}
+            >
+              {message.role === "user" ? (
+                <User className="h-3.5 w-3.5 text-white" />
+              ) : (
+                <Bot className="h-3.5 w-3.5 text-gray-600 dark:text-gray-300" />
+              )}
+            </div>
+          )}
+
+          {/* Message Content */}
+          <div className={cn("flex-1 min-w-0", message.role === "system" && "text-center")}>
+            {/* Role Label + Timestamp */}
+            {message.role !== "system" && (
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-[11px] font-semibold text-foreground">
+                  {message.role === "user" ? "You" : "AI Assistant"}
+                </span>
+                <span className="text-[10px] text-foreground-muted">
+                  {formatTime(message.timestamp)}
+                </span>
+              </div>
+            )}
+
+            {/* Message Text */}
+            <div
+              className={cn(
+                "text-sm leading-relaxed",
+                message.role === "user" && "text-foreground",
+                message.role === "assistant" && "text-foreground-secondary",
+                message.role === "system" && "text-xs text-foreground-muted italic"
+              )}
+            >
+              <p className="whitespace-pre-wrap">{message.content}</p>
+            </div>
+
+            {/* Inline Diff Preview for actions */}
+            {message.action && message.action.files && message.action.files.length > 0 && (
+              <div className="mt-3">
+                <InlineDiffPreview
+                  action={message.action}
+                  onAccept={() => onAcceptChanges?.(message.id)}
+                  onRevert={() => onRevertChanges?.(message.id)}
+                />
+              </div>
+            )}
+
+            {/* Status badge for actions without files */}
+            {message.action && (!message.action.files || message.action.files.length === 0) && (
+              <div className="mt-2">
+                {message.action.status === "accepted" && (
+                  <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs rounded-md">
+                    <CheckCircle className="h-3 w-3" />
+                    <span>Changes accepted</span>
+                  </div>
+                )}
+                {message.action.status === "reverted" && (
+                  <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs rounded-md">
+                    <RotateCcw className="h-3 w-3" />
+                    <span>Changes reverted</span>
+                  </div>
+                )}
+                {message.action.status === "error" && (
+                  <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs rounded-md">
+                    <AlertCircle className="h-3 w-3" />
+                    <span>Error occurred</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+
+      {/* Scroll anchor */}
+      <div ref={bottomRef} />
+    </div>
+  );
+}
+