sonance-brand-mcp 1.3.24 → 1.3.26

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

@@ -57,6 +57,7 @@ export function ChatInterface({
   const [input, setInput] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -126,6 +127,7 @@ export function ChatInterface({
 
     setMessages((prev) => [...prev, userMessage]);
     setInput("");
+    if (inputRef.current) inputRef.current.value = "";
     setIsProcessing(true);
 
     try {
@@ -216,11 +218,14 @@ export function ChatInterface({
   };
 
   const handleSend = async (prompt: string) => {
-    if (!prompt.trim() || isProcessing) return;
+    // Fallback: read from DOM if React state is empty (browser automation compatibility)
+    const actualPrompt = prompt || inputRef.current?.value || "";
+    
+    if (!actualPrompt.trim() || isProcessing) return;
 
     // Use vision mode handler if vision mode is active
     if (visionMode) {
-      return handleVisionEdit(prompt);
+      return handleVisionEdit(actualPrompt);
     }
 
     // If no component is selected, intercept the request
@@ -228,11 +233,12 @@ export function ChatInterface({
       const userMessage: ChatMessage = {
         id: `msg-${Date.now()}`,
         role: "user",
-        content: prompt,
+        content: actualPrompt,
         timestamp: new Date(),
       };
       setMessages((prev) => [...prev, userMessage]);
       setInput("");
+      if (inputRef.current) inputRef.current.value = "";
       
       setTimeout(() => {
         const assistantMessage: ChatMessage = {
@@ -249,12 +255,13 @@ export function ChatInterface({
     const userMessage: ChatMessage = {
       id: `msg-${Date.now()}`,
       role: "user",
-      content: prompt,
+      content: actualPrompt,
       timestamp: new Date(),
     };
 
     setMessages((prev) => [...prev, userMessage]);
     setInput("");
+    if (inputRef.current) inputRef.current.value = "";
     setIsProcessing(true);
 
     try {
@@ -285,7 +292,7 @@ export function ChatInterface({
           componentType,
           filePath,
           currentCode: sourceData.content,
-          userRequest: prompt,
+          userRequest: actualPrompt,
           // Variant-scoped editing context
           editScope,
           variantId: editScope === "variant" ? variantId : undefined,
@@ -390,13 +397,14 @@ export function ChatInterface({
       {/* Input */}
       <div className="flex gap-2">
         <input
+          ref={inputRef}
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();
-              handleSend(input);
+              handleSend(input || inputRef.current?.value || "");
             }
           }}
           placeholder={
@@ -418,8 +426,8 @@ export function ChatInterface({
           )}
         />
         <button
-          onClick={() => handleSend(input)}
-          disabled={isProcessing || !input.trim()}
+          onClick={() => handleSend(input || inputRef.current?.value || "")}
+          disabled={isProcessing}
           className={cn(
             "px-3 py-2 rounded transition-colors",
             visionMode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.24",
+  "version": "1.3.26",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",