nitrostack 1.0.1 → 1.0.2

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

@@ -0,0 +1,390 @@
+'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';
+
+export default function ChatPage() {
+  const {
+    chatMessages,
+    addChatMessage,
+    clearChat,
+    currentProvider,
+    setCurrentProvider,
+    currentImage,
+    setCurrentImage,
+    jwtToken,
+    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 response = await api.chat({
+        provider: currentProvider,
+        messages: [...chatMessages, userMessage],
+        apiKey,
+        jwtToken: jwtToken || undefined,
+      });
+
+      if (response.message) {
+        addChatMessage(response.message);
+      }
+
+      // Handle tool calls
+      if (response.toolCalls && response.toolResults) {
+        // Check for login token
+        for (let i = 0; i < response.toolCalls.length; i++) {
+          const toolCall = response.toolCalls[i];
+          const toolResult = response.toolResults[i];
+
+          if (toolCall.name === 'login' && toolResult.content) {
+            try {
+              const parsed = JSON.parse(toolResult.content);
+              if (parsed.token) {
+                useStudioStore.getState().setJwtToken(parsed.token);
+              }
+            } catch (e) {
+              // Ignore
+            }
+          }
+        }
+
+        // Add tool results
+        for (const result of response.toolResults) {
+          addChatMessage(result);
+        }
+
+        // Continue conversation
+        await continueChatWithToolResults(apiKey);
+      }
+    } catch (error) {
+      console.error('Chat error:', error);
+      addChatMessage({
+        role: 'assistant',
+        content: 'Sorry, I encountered an error. Please try again.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const continueChatWithToolResults = async (apiKey: string) => {
+    try {
+      const response = await api.chat({
+        provider: currentProvider,
+        messages: chatMessages,
+        apiKey,
+        jwtToken: jwtToken || undefined,
+      });
+
+      if (response.message) {
+        addChatMessage(response.message);
+      }
+
+      // Recursive tool calls
+      if (response.toolCalls && response.toolResults) {
+        for (const result of response.toolResults) {
+          addChatMessage(result);
+        }
+        await continueChatWithToolResults(apiKey);
+      }
+    } 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-dark-bg">
+      {/* Header */}
+      <div className="border-b border-dark-border p-4 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">🤖 AI Chat</h1>
+          <p className="text-text-secondary text-sm">Chat with tools integration</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <select
+            value={currentProvider}
+            onChange={(e) => setCurrentProvider(e.target.value as 'openai' | 'gemini')}
+            className="input w-32"
+          >
+            <option value="openai">OpenAI</option>
+            <option value="gemini">Gemini</option>
+          </select>
+          <button onClick={() => setShowSettings(!showSettings)} className="btn btn-secondary">
+            ⚙️
+          </button>
+          <button onClick={clearChat} className="btn btn-secondary">
+            🗑️
+          </button>
+        </div>
+      </div>
+
+      {/* Settings Panel */}
+      {showSettings && (
+        <div className="border-b border-dark-border p-4 bg-dark-surface">
+          <h3 className="font-medium mb-3">API Keys</h3>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm mb-2 block">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
+                </button>
+              </div>
+            </div>
+            <div>
+              <label className="text-sm mb-2 block">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
+                </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-dark-border p-4">
+        {currentImage && (
+          <div className="mb-2 relative inline-block">
+            <img
+              src={currentImage.data}
+              alt="Upload preview"
+              className="h-20 rounded-lg border border-dark-border"
+            />
+            <button
+              onClick={() => setCurrentImage(null)}
+              className="absolute -top-2 -right-2 bg-error text-white rounded-full w-6 h-6 flex items-center justify-center text-xs"
+            >
+              ✕
+            </button>
+          </div>
+        )}
+        <div className="flex gap-2">
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleImageUpload}
+            accept="image/*"
+            className="hidden"
+          />
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            className="btn btn-secondary"
+          >
+            🖼️
+          </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" disabled={loading}>
+            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-600' : 'bg-dark-surface'} rounded-2xl p-4 border border-dark-border`}>
+        {message.image && (
+          <img
+            src={message.image.data}
+            alt={message.image.name}
+            className="rounded-lg mb-2 max-w-full"
+          />
+        )}
+        <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+
+        {/* Tool Calls */}
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <div className="mt-3 space-y-2">
+            {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-3 border" style={{
+      backgroundColor: 'hsl(var(--muted))',
+      borderColor: 'hsl(var(--border))'
+    }}>
+      <div className="flex items-center gap-2 mb-2">
+        <span>🔧</span>
+        <span className="font-medium text-sm">{toolCall.name}</span>
+      </div>
+
+      {/* Arguments */}
+      <details className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>
+        <summary className="cursor-pointer">Arguments</summary>
+        <pre className="mt-2 p-2 rounded overflow-auto" style={{
+          backgroundColor: 'hsl(var(--background))'
+        }}>
+          {JSON.stringify(toolCall.arguments, null, 2)}
+        </pre>
+      </details>
+
+      {/* Widget if available */}
+      {componentUri && widgetData && (
+        <div className="mt-3 rounded-lg overflow-hidden border" style={{
+          height: '320px',
+          borderColor: 'hsl(var(--border))',
+          backgroundColor: 'hsl(var(--background))'
+        }}>
+          <WidgetRenderer uri={componentUri} data={widgetData} />
+        </div>
+      )}
+    </div>
+  );
+}
+