nitrostack 1.0.1 → 1.0.2

package/src/studio/app/chat/page.tsx

@@ -0,0 +1,530 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
+import { WidgetRenderer } from '@/components/WidgetRenderer';
+import type { ChatMessage, Tool, ToolCall } from '@/lib/types';
+import { 
+  Bot, 
+  Settings, 
+  Trash2, 
+  Image as ImageIcon, 
+  Send, 
+  Wrench, 
+  Save,
+  X
+} from 'lucide-react';
+
+export default function ChatPage() {
+  const {
+    chatMessages,
+    addChatMessage,
+    clearChat,
+    currentProvider,
+    setCurrentProvider,
+    currentImage,
+    setCurrentImage,
+    jwtToken,
+    apiKey: mcpApiKey, // Rename to avoid conflict with LLM apiKey
+    tools,
+    setTools,
+  } = useStudioStore();
+
+  const [inputValue, setInputValue] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    loadTools();
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatMessages]);
+
+  const loadTools = async () => {
+    try {
+      const data = await api.getTools();
+      setTools(data.tools || []);
+    } catch (error) {
+      console.error('Failed to load tools:', error);
+    }
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 20 * 1024 * 1024) {
+      alert('Image too large (max 20MB)');
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      setCurrentImage({
+        data: event.target?.result as string,
+        type: file.type,
+        name: file.name,
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSend = async () => {
+    if (!inputValue.trim() && !currentImage) return;
+
+    const apiKey = localStorage.getItem(`${currentProvider}_api_key`);
+    if (!apiKey) {
+      setShowSettings(true);
+      alert('Please set your API key first');
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      role: 'user',
+      content: inputValue,
+    };
+
+    if (currentImage) {
+      userMessage.image = currentImage;
+    }
+
+    addChatMessage(userMessage);
+    setInputValue('');
+    setCurrentImage(null);
+    setLoading(true);
+
+    try {
+      const messagesToSend = [...chatMessages, userMessage];
+      
+      // Clean messages to ensure they're serializable
+      const cleanedMessages = messagesToSend.map(msg => {
+        const cleaned: any = {
+          role: msg.role,
+          content: msg.content || '',
+        };
+        
+        if (msg.toolCalls && msg.toolCalls.length > 0) {
+          cleaned.toolCalls = msg.toolCalls;
+        }
+        
+        if (msg.toolCallId) {
+          cleaned.toolCallId = msg.toolCallId;
+        }
+        
+        // Skip image property for now (not supported by OpenAI chat completions)
+        // if (msg.image) {
+        //   cleaned.image = msg.image;
+        // }
+        
+        return cleaned;
+      });
+      
+      console.log('Sending messages to API:', cleanedMessages);
+      console.log('Original messages:', messagesToSend);
+      console.log('Cleaned messages JSON:', JSON.stringify(cleanedMessages));
+      
+      const response = await api.chat({
+        provider: currentProvider,
+        messages: cleanedMessages,
+        apiKey, // LLM API key (OpenAI/Gemini)
+        jwtToken: jwtToken || undefined,
+        mcpApiKey: mcpApiKey || undefined, // MCP server API key
+      });
+
+      // Handle tool calls FIRST (before adding the message)
+      if (response.toolCalls && response.toolResults) {
+        // Attach results to tool calls for widget rendering
+        const toolCallsWithResults = response.toolCalls.map((tc, i) => {
+          const toolResult = response.toolResults[i];
+          
+          // Parse the result content
+          let parsedResult;
+          if (toolResult.content) {
+            try {
+              parsedResult = JSON.parse(toolResult.content);
+              
+              // Unwrap if response was wrapped by TransformInterceptor
+              if (parsedResult.success !== undefined && parsedResult.data !== undefined) {
+                parsedResult = parsedResult.data;
+              }
+            } catch {
+              parsedResult = { content: toolResult.content };
+            }
+          }
+          
+          return {
+            ...tc,
+            result: parsedResult,
+          };
+        });
+        
+        // Add assistant message with tool calls
+        if (response.message) {
+          response.message.toolCalls = toolCallsWithResults;
+          addChatMessage(response.message);
+        }
+        
+        // Extract JWT token from ANY tool response (not just 'login')
+        for (let i = 0; i < response.toolCalls.length; i++) {
+          const toolCall = response.toolCalls[i];
+          const toolResult = response.toolResults[i];
+
+          if (toolResult.content) {
+            try {
+              const parsed = JSON.parse(toolResult.content);
+              // Check for token in multiple possible locations
+              const token = parsed.token || parsed.access_token || parsed.jwt || parsed.data?.token;
+              if (token) {
+                console.log('🔐 Token received from tool in chat, saving to global state');
+                useStudioStore.getState().setJwtToken(token);
+                break; // Stop after first token found
+              }
+            } catch (e) {
+              // Ignore parsing errors
+            }
+          }
+        }
+
+        // Add tool results to messages
+        const toolResultMessages: ChatMessage[] = [];
+        for (const result of response.toolResults) {
+          addChatMessage(result);
+          toolResultMessages.push(result);
+        }
+
+        // Continue conversation and WAIT for it to complete before allowing new messages
+        // Build the full message history to pass to continuation
+        const messagesForContinuation = [
+          ...chatMessages,
+          response.message!, // Assistant message with tool calls
+          ...toolResultMessages, // Tool result messages
+        ];
+        await continueChatWithToolResults(apiKey, messagesForContinuation);
+      } else {
+        // No tool calls, just add the message
+        if (response.message) {
+          addChatMessage(response.message);
+        }
+      }
+      
+      // Set loading to false AFTER all async operations complete
+      setLoading(false);
+    } catch (error) {
+      console.error('Chat error:', error);
+      addChatMessage({
+        role: 'assistant',
+        content: 'Sorry, I encountered an error. Please try again.',
+      });
+      setLoading(false);
+    }
+  };
+
+  const continueChatWithToolResults = async (apiKey: string, messages?: Message[]) => {
+    try {
+      // Use provided messages or fall back to store (for recursive calls)
+      const messagesToUse = messages || chatMessages;
+      
+      // Clean messages before sending
+      const cleanedMessages = messagesToUse.map(msg => {
+        const cleaned: any = {
+          role: msg.role,
+          content: msg.content || '',
+        };
+        
+        if (msg.toolCalls && msg.toolCalls.length > 0) {
+          cleaned.toolCalls = msg.toolCalls;
+        }
+        
+        if (msg.toolCallId) {
+          cleaned.toolCallId = msg.toolCallId;
+        }
+        
+        return cleaned;
+      });
+      
+      console.log('Continue with cleaned messages:', JSON.stringify(cleanedMessages));
+      
+      const response = await api.chat({
+        provider: currentProvider,
+        messages: cleanedMessages,
+        apiKey, // LLM API key (OpenAI/Gemini)
+        jwtToken: jwtToken || undefined,
+        mcpApiKey: mcpApiKey || undefined, // MCP server API key
+      });
+
+      if (response.message) {
+        addChatMessage(response.message);
+      }
+
+      // Recursive tool calls
+      if (response.toolCalls && response.toolResults) {
+        const newToolResults: Message[] = [];
+        for (const result of response.toolResults) {
+          addChatMessage(result);
+          newToolResults.push(result);
+        }
+        
+        // Build messages for next iteration
+        const nextMessages = [
+          ...(messages || chatMessages),
+          response.message!,
+          ...newToolResults,
+        ];
+        await continueChatWithToolResults(apiKey, nextMessages);
+      }
+    } catch (error) {
+      console.error('Continuation error:', error);
+    }
+  };
+
+  const saveApiKey = (provider: 'openai' | 'gemini') => {
+    const input = document.getElementById(`${provider}-api-key`) as HTMLInputElement;
+    const key = input?.value.trim();
+
+    if (!key || key === '••••••••') {
+      alert('Please enter a valid API key');
+      return;
+    }
+
+    localStorage.setItem(`${provider}_api_key`, key);
+    input.value = '••••••••';
+    alert(`${provider === 'openai' ? 'OpenAI' : 'Gemini'} API key saved`);
+  };
+
+  return (
+    <div className="h-screen flex flex-col bg-background">
+      {/* Header */}
+      <div className="border-b border-border p-6 flex items-center justify-between bg-card">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center">
+            <Bot className="w-6 h-6 text-black" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">AI Chat</h1>
+            <p className="text-muted-foreground text-sm">Chat with tools integration</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <select
+            value={currentProvider}
+            onChange={(e) => setCurrentProvider(e.target.value as 'openai' | 'gemini')}
+            className="input w-36"
+          >
+            <option value="gemini">Gemini</option>
+            <option value="openai">OpenAI</option>
+          </select>
+          <button 
+            onClick={() => setShowSettings(!showSettings)} 
+            className={`btn ${showSettings ? 'btn-primary' : 'btn-secondary'}`}
+          >
+            <Settings className="w-4 h-4" />
+          </button>
+          <button onClick={clearChat} className="btn btn-secondary">
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Settings Panel */}
+      {showSettings && (
+        <div className="border-b border-border p-6 bg-muted/30">
+          <h3 className="font-semibold mb-4 text-foreground flex items-center gap-2">
+            <Settings className="w-5 h-5" />
+            API Keys
+          </h3>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm mb-2 block text-foreground font-medium">OpenAI API Key</label>
+              <div className="flex gap-2">
+                <input 
+                  id="openai-api-key" 
+                  type="password" 
+                  className="input flex-1" 
+                  placeholder="sk-..." 
+                />
+                <button onClick={() => saveApiKey('openai')} className="btn btn-primary">
+                  <Save className="w-4 h-4 mr-2" />
+                  Save
+                </button>
+              </div>
+            </div>
+            <div>
+              <label className="text-sm mb-2 block text-foreground font-medium">Gemini API Key</label>
+              <div className="flex gap-2">
+                <input 
+                  id="gemini-api-key" 
+                  type="password" 
+                  className="input flex-1" 
+                  placeholder="AIza..." 
+                />
+                <button onClick={() => saveApiKey('gemini')} className="btn btn-primary">
+                  <Save className="w-4 h-4 mr-2" />
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {chatMessages.map((msg, idx) => (
+          <ChatMessageComponent key={idx} message={msg} tools={tools} />
+        ))}
+        {loading && (
+          <div className="flex items-center gap-2 text-text-secondary">
+            <div className="animate-pulse">Thinking...</div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-border p-6 bg-card">
+        {currentImage && (
+          <div className="mb-3 relative inline-block">
+            <img
+              src={currentImage.data}
+              alt="Upload preview"
+              className="h-24 rounded-lg border border-border shadow-sm"
+            />
+            <button
+              onClick={() => setCurrentImage(null)}
+              className="absolute -top-2 -right-2 bg-destructive text-white rounded-full w-7 h-7 flex items-center justify-center hover:bg-destructive/90 transition-colors shadow-md"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+        <div className="flex gap-3">
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleImageUpload}
+            accept="image/*"
+            className="hidden"
+          />
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            className="btn btn-secondary"
+            title="Upload image"
+          >
+            <ImageIcon className="w-5 h-5" />
+          </button>
+          <textarea
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                handleSend();
+              }
+            }}
+            placeholder="Type a message... (Cmd/Ctrl + Enter to send)"
+            className="input flex-1 resize-none"
+            rows={2}
+          />
+          <button onClick={handleSend} className="btn btn-primary px-6 gap-2" disabled={loading}>
+            <Send className="w-4 h-4" />
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools: Tool[] }) {
+  if (message.role === 'tool') return null; // Don't render tool messages directly
+
+  const isUser = message.role === 'user';
+
+  return (
+    <div
+      className={`flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in`}
+    >
+      <div className={`max-w-[70%] ${isUser ? 'bg-primary/10 border-primary/30' : 'bg-card'} rounded-2xl p-5 border border-border shadow-sm`}>
+        {message.image && (
+          <img
+            src={message.image.data}
+            alt={message.image.name}
+            className="rounded-lg mb-3 max-w-full border border-border"
+          />
+        )}
+        <p className="text-sm whitespace-pre-wrap text-foreground">{message.content}</p>
+
+        {/* Tool Calls */}
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <div className="mt-4 space-y-3">
+            {message.toolCalls.map((toolCall) => (
+              <ToolCallComponent key={toolCall.id} toolCall={toolCall} tools={tools} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Tool[] }) {
+  const tool = tools.find((t) => t.name === toolCall.name);
+  
+  // Get widget URI from multiple possible sources
+  const componentUri = 
+    tool?.widget?.route || 
+    tool?.outputTemplate || 
+    tool?._meta?.['openai/outputTemplate'] || 
+    tool?._meta?.['ui/template'];
+  
+  // Get result data from toolCall and unwrap if needed
+  let widgetData = toolCall.result || toolCall.arguments;
+  
+  // Unwrap if response was wrapped by TransformInterceptor
+  // Check if it has the interceptor's structure: { success, data, metadata }
+  if (widgetData && typeof widgetData === 'object' && 
+      widgetData.success !== undefined && widgetData.data !== undefined) {
+    widgetData = widgetData.data; // Return the unwrapped data
+  }
+
+  console.log('ToolCallComponent:', { 
+    toolName: toolCall.name, 
+    componentUri, 
+    hasData: !!widgetData,
+    tool 
+  });
+
+  return (
+    <div className="rounded-lg p-4 border border-border bg-muted/30">
+      <div className="flex items-center gap-2 mb-3">
+        <Wrench className="w-4 h-4 text-primary" />
+        <span className="font-semibold text-sm text-foreground">{toolCall.name}</span>
+      </div>
+
+      {/* Arguments */}
+      <details className="text-xs text-muted-foreground">
+        <summary className="cursor-pointer hover:text-foreground transition-colors font-medium">
+          Arguments
+        </summary>
+        <pre className="mt-2 p-3 rounded-lg overflow-auto bg-background border border-border font-mono text-foreground">
+          {JSON.stringify(toolCall.arguments, null, 2)}
+        </pre>
+      </details>
+
+      {/* Widget if available */}
+      {componentUri && widgetData && (
+        <div className="mt-3 rounded-lg overflow-hidden border border-border bg-background shadow-inner" style={{
+          height: '320px'
+        }}>
+          <WidgetRenderer uri={componentUri} data={widgetData} />
+        </div>
+      )}
+    </div>
+  );
+}
+