nitrostack 1.0.69 → 1.0.71

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

@@ -30,8 +30,8 @@ export default function ChatPage() {
     clearChat,
     currentProvider,
     setCurrentProvider,
-    currentImage,
-    setCurrentImage,
+    currentFile,
+    setCurrentFile,
     tools,
     setTools,
   } = useStudioStore();
@@ -57,6 +57,7 @@ export default function ChatPage() {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const initialToolExecuted = useRef(false);
 
   useEffect(() => {
     loadTools();
@@ -74,6 +75,12 @@ export default function ChatPage() {
     }
   }, []);
 
+  useEffect(() => {
+    if (tools.length > 0 && !initialToolExecuted.current) {
+      checkAndRunInitialTool();
+    }
+  }, [tools]);
+
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [chatMessages]);
@@ -225,6 +232,75 @@ export default function ChatPage() {
     }
   };
 
+  const checkAndRunInitialTool = async () => {
+    // Find initial tool using specific metadata key
+    const initialTool = tools.find(t => t._meta?.['tool/initial'] === true);
+    if (!initialTool) return;
+
+    // Check for API keys (Gemini or OpenAI)
+    const geminiKey = localStorage.getItem('gemini_api_key');
+    const openaiKey = localStorage.getItem('openai_api_key');
+    const hasKey = (geminiKey && geminiKey !== '••••••••') || (openaiKey && openaiKey !== '••••••••');
+
+    if (!hasKey) return;
+
+    // Mark as executed immediately to prevent double run
+    initialToolExecuted.current = true;
+    console.log('🚀 Auto-executing initial tool:', initialTool.name);
+
+    // Initial message
+    const autoMsg: ChatMessage = {
+      role: 'user',
+      content: `(Auto) Executing initial tool: ${initialTool.name}`,
+    };
+    addChatMessage(autoMsg);
+    setLoading(true);
+
+    try {
+      const { jwtToken, mcpApiKey } = getAuthTokens();
+      const effectiveToken = jwtToken || useStudioStore.getState().oauthState?.currentToken;
+
+      // Call the tool
+      const result = await api.callTool(
+        initialTool.name,
+        {},
+        effectiveToken,
+        mcpApiKey || undefined
+      );
+
+      // Add assistant message with tool call info
+      const toolCallId = `call_${Date.now()}`;
+      const assistantMsg: ChatMessage = {
+        role: 'assistant',
+        content: `Invoking ${initialTool.name}...`,
+        toolCalls: [{
+          id: toolCallId,
+          name: initialTool.name,
+          arguments: {},
+          result // Attach result here for widget rendering
+        }]
+      };
+      addChatMessage(assistantMsg);
+
+      // Add tool result message
+      const toolResultMsg: ChatMessage = {
+        role: 'tool',
+        content: JSON.stringify(result),
+        toolCallId: toolCallId
+      };
+      addChatMessage(toolResultMsg);
+
+    } catch (error) {
+      console.error('Initial tool execution failed:', error);
+      addChatMessage({
+        role: 'assistant',
+        content: `Failed to execute initial tool ${initialTool.name}: ${error instanceof Error ? error.message : String(error)}`
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const handleExecutePrompt = async () => {
     if (!selectedPrompt) return;
 
@@ -286,7 +362,7 @@ export default function ChatPage() {
     }
   };
 
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
@@ -297,7 +373,7 @@ export default function ChatPage() {
 
     const reader = new FileReader();
     reader.onload = (event) => {
-      setCurrentImage({
+      setCurrentFile({
         data: event.target?.result as string,
         type: file.type,
         name: file.name,
@@ -307,7 +383,7 @@ export default function ChatPage() {
   };
 
   const handleSend = async () => {
-    if (!inputValue.trim() && !currentImage) return;
+    if (!inputValue.trim() && !currentFile) return;
 
     const apiKey = localStorage.getItem(`${currentProvider}_api_key`);
     if (!apiKey) {
@@ -321,13 +397,13 @@ export default function ChatPage() {
       content: inputValue,
     };
 
-    if (currentImage) {
-      userMessage.image = currentImage;
+    if (currentFile) {
+      userMessage.file = currentFile;
     }
 
     addChatMessage(userMessage);
     setInputValue('');
-    setCurrentImage(null);
+    setCurrentFile(null);
     setLoading(true);
 
     try {
@@ -349,9 +425,9 @@ export default function ChatPage() {
         }
 
         // Skip image property for now (not supported by OpenAI chat completions)
-        // if (msg.image) {
-        //   cleaned.image = msg.image;
-        // }
+        if (msg.file) {
+          cleaned.file = msg.file;
+        }
 
         return cleaned;
       });
@@ -460,7 +536,7 @@ export default function ChatPage() {
     }
   };
 
-  const continueChatWithToolResults = async (apiKey: string, messages?: Message[]) => {
+  const continueChatWithToolResults = async (apiKey: string, messages?: ChatMessage[]) => {
     try {
       // Use provided messages or fall back to store (for recursive calls)
       const messagesToUse = messages || chatMessages;
@@ -503,7 +579,7 @@ export default function ChatPage() {
 
       // Recursive tool calls
       if (response.toolCalls && response.toolResults) {
-        const newToolResults: Message[] = [];
+        const newToolResults: ChatMessage[] = [];
         for (const result of response.toolResults) {
           addChatMessage(result);
           newToolResults.push(result);
@@ -832,19 +908,25 @@ export default function ChatPage() {
       {/* ChatGPT-style Input Area - Fixed at bottom */}
       <div className="sticky bottom-0 border-t border-border/50 bg-background/95 backdrop-blur-md shadow-[0_-2px_10px_rgba(0,0,0,0.1)]">
         <div className="max-w-5xl mx-auto px-3 sm:px-4 py-3 sm:py-4">
-          {currentImage && (
+          {currentFile && (
             <div className="mb-3 p-3 bg-card rounded-xl flex items-start gap-3 border border-border/50 animate-fade-in">
-              <img
-                src={currentImage.data}
-                alt={currentImage.name}
-                className="w-20 h-20 object-cover rounded-lg border border-border"
-              />
+              {currentFile.type.startsWith('image/') ? (
+                <img
+                  src={currentFile.data}
+                  alt={currentFile.name}
+                  className="w-20 h-20 object-cover rounded-lg border border-border"
+                />
+              ) : (
+                <div className="w-20 h-20 rounded-lg border border-border bg-muted flex items-center justify-center">
+                  <FileText className="w-8 h-8 text-muted-foreground" />
+                </div>
+              )}
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-foreground truncate">{currentImage.name}</p>
-                <p className="text-xs text-muted-foreground">{currentImage.type}</p>
+                <p className="text-sm font-medium text-foreground truncate">{currentFile.name}</p>
+                <p className="text-xs text-muted-foreground">{currentFile.type}</p>
               </div>
               <button
-                onClick={() => setCurrentImage(null)}
+                onClick={() => setCurrentFile(null)}
                 className="w-7 h-7 rounded-lg flex items-center justify-center bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground transition-all flex-shrink-0"
               >
                 <X className="w-4 h-4" />
@@ -855,14 +937,14 @@ export default function ChatPage() {
             <input
               type="file"
               ref={fileInputRef}
-              onChange={handleImageUpload}
-              accept="image/*"
+              onChange={handleFileUpload}
+              accept="image/*,.pdf,.txt,.md,.json,.csv,.docx"
               className="hidden"
             />
             <button
               onClick={() => fileInputRef.current?.click()}
               className="h-11 w-11 rounded-xl flex items-center justify-center bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground transition-all flex-shrink-0"
-              title="Upload image"
+              title="Upload file"
             >
               <ImageIcon className="w-5 h-5" />
             </button>
@@ -890,7 +972,7 @@ export default function ChatPage() {
             </div>
             <button
               onClick={handleSend}
-              disabled={loading || (!inputValue.trim() && !currentImage)}
+              disabled={loading || (!inputValue.trim() && !currentFile)}
               className="h-11 w-11 rounded-xl flex items-center justify-center bg-gradient-to-br from-primary to-amber-500 text-white shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all flex-shrink-0 hover:scale-105 active:scale-95"
               title="Send message (Enter)"
             >
@@ -1021,14 +1103,26 @@ function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools:
 
       {/* Message Content */}
       <div className="flex-1 min-w-0">
-        {/* Image if present */}
-        {message.image && (
-          <div className="mb-3 rounded-xl overflow-hidden border border-border/50 shadow-sm">
-            <img
-              src={message.image.data}
-              alt={message.image.name}
-              className="max-w-full"
-            />
+        {/* File if present */}
+        {message.file && (
+          <div className="mb-3 rounded-xl overflow-hidden border border-border/50 shadow-sm max-w-sm">
+            {message.file.type.startsWith('image/') ? (
+              <img
+                src={message.file.data}
+                alt={message.file.name}
+                className="max-w-full"
+              />
+            ) : (
+              <div className="p-4 bg-muted/30 flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <FileText className="w-5 h-5 text-primary" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">{message.file.name}</p>
+                  <p className="text-xs text-muted-foreground">{message.file.type}</p>
+                </div>
+              </div>
+            )}
           </div>
         )}
 

package/src/studio/lib/llm-service.ts

@@ -9,6 +9,11 @@ export interface ChatMessage {
   toolCalls?: ToolCall[];
   toolCallId?: string; // For tool responses - the ID of the call being responded to
   toolName?: string;   // For tool responses - the name of the tool (required by Gemini)
+  file?: {
+    data: string;
+    type: string;
+    name: string;
+  };
 }
 
 export interface ToolCall {
@@ -187,6 +192,53 @@ User: "list all resources"
         };
       }
 
+      if (msg.role === 'user' && msg.file) {
+        // Handle file attachments for OpenAI
+        const contentParts: any[] = [
+          { type: 'text', text: msg.content || ' ' } // Ensure some text exists
+        ];
+
+        if (msg.file.type.startsWith('image/')) {
+          contentParts.push({
+            type: 'image_url',
+            image_url: {
+              url: msg.file.data,
+            }
+          });
+        } else {
+          // For non-image files, append as text if it's a text file, or note unavailable
+          // OpenAI (without Vision/File Search) can't natively handle arbitrary files in chat completions
+          // So we append it as context if it looks like text
+          if (msg.file.type.startsWith('text/') || msg.file.name.endsWith('.txt') || msg.file.name.endsWith('.md') || msg.file.name.endsWith('.json')) {
+            // For text files, we might need to decode base64 if it's base64 encoded
+            // Assuming data is "data:mime;base64,..."
+            try {
+              const base64Content = msg.file.data.split(',')[1];
+              const textContent = Buffer.from(base64Content, 'base64').toString('utf-8');
+              contentParts.push({
+                type: 'text',
+                text: `\n\n[Attached File: ${msg.file.name}]\n${textContent}`
+              });
+            } catch (e) {
+              contentParts.push({
+                type: 'text',
+                text: `\n\n[Attached File: ${msg.file.name}] (Could not decode content)`
+              });
+            }
+          } else {
+            contentParts.push({
+              type: 'text',
+              text: `\n\n[Attached File: ${msg.file.name}] (Type: ${msg.file.type})`
+            });
+          }
+        }
+
+        return {
+          role: msg.role,
+          content: contentParts,
+        };
+      }
+
       return {
         role: msg.role,
         content: msg.content,
@@ -334,9 +386,60 @@ User: "list all resources"
         i++;
       } else {
         // Regular user or assistant message
+        const parts: any[] = [];
+
+        if (msg.content) {
+          parts.push({ text: msg.content });
+        }
+
+        if (msg.role === 'user' && msg.file) {
+          // Extract base64 and mime type
+          const matches = msg.file.data.match(/^data:([^;]+);base64,(.+)$/);
+          if (matches) {
+            const mimeType = matches[1];
+            const data = matches[2];
+
+            // Gemini supports: PDF, image/*, video/*, audio/*
+            const isSupported =
+              mimeType === 'application/pdf' ||
+              mimeType.startsWith('image/') ||
+              mimeType.startsWith('video/') ||
+              mimeType.startsWith('audio/');
+
+            if (isSupported) {
+              parts.push({
+                inlineData: {
+                  mimeType: mimeType,
+                  data: data
+                }
+              });
+            } else {
+              // For unsupported types (DOCX, TXT, JSON, etc.), try to decode and pass as text context
+              // This acts as a "poor man's" file processing for text-based formats
+              try {
+                const textContent = Buffer.from(data, 'base64').toString('utf-8');
+                // Clean up non-printable characters if it's a binary file like DOCX appearing as text
+                // Note: For real DOCX parsing we'd need a library, but for now we pass raw or decoded text
+                // If the user wants to process it with a tool, the *tool* will get the raw base64.
+                // Here we just want to avoid crashing Gemini.
+
+                parts.push({
+                  text: `\n\n[Attached File: ${msg.file.name} (${mimeType})]\n(File content is available to tools via file_content parameter)`
+                });
+              } catch (e) {
+                parts.push({
+                  text: `\n\n[Attached File: ${msg.file.name} (${mimeType})]\n(Content available to tools)`
+                });
+              }
+            }
+          } else {
+            console.warn('Could not parse file data URI:', msg.file.name);
+          }
+        }
+
         contents.push({
           role: msg.role === 'assistant' ? 'model' : 'user',
-          parts: [{ text: msg.content }],
+          parts,
         });
         i++;
       }

package/src/studio/lib/store.ts

@@ -36,8 +36,8 @@ interface StudioState {
   clearChat: () => void;
   currentProvider: 'openai' | 'gemini';
   setCurrentProvider: (provider: 'openai' | 'gemini') => void;
-  currentImage: { data: string; type: string; name: string } | null;
-  setCurrentImage: (image: { data: string; type: string; name: string } | null) => void;
+  currentFile: { data: string; type: string; name: string } | null;
+  setCurrentFile: (file: { data: string; type: string; name: string } | null) => void;
 
   // Auth
   jwtToken: string | null;
@@ -102,8 +102,8 @@ export const useStudioStore = create<StudioState>((set) => ({
   clearChat: () => set({ chatMessages: [] }),
   currentProvider: 'gemini',
   setCurrentProvider: (currentProvider) => set({ currentProvider }),
-  currentImage: null,
-  setCurrentImage: (currentImage) => set({ currentImage }),
+  currentFile: null,
+  setCurrentFile: (currentFile) => set({ currentFile }),
 
   // Auth
   jwtToken: typeof window !== 'undefined' ? localStorage.getItem('mcp_jwt_token') : null,
@@ -130,32 +130,32 @@ export const useStudioStore = create<StudioState>((set) => ({
     set({ apiKey });
   },
 
-  oauthState: typeof window !== 'undefined' 
+  oauthState: typeof window !== 'undefined'
     ? JSON.parse(localStorage.getItem('mcp_oauth_state') || 'null') || {
-        authServerUrl: null,
-        resourceMetadata: null,
-        authServerMetadata: null,
-        clientRegistration: null,
-        selectedScopes: [],
-        currentToken: null,
-      }
+      authServerUrl: null,
+      resourceMetadata: null,
+      authServerMetadata: null,
+      clientRegistration: null,
+      selectedScopes: [],
+      currentToken: null,
+    }
     : {
-        authServerUrl: null,
-        resourceMetadata: null,
-        authServerMetadata: null,
-        clientRegistration: null,
-        selectedScopes: [],
-        currentToken: null,
-      },
+      authServerUrl: null,
+      resourceMetadata: null,
+      authServerMetadata: null,
+      clientRegistration: null,
+      selectedScopes: [],
+      currentToken: null,
+    },
   setOAuthState: (newState) => {
     const updatedState = (state: any) => {
       const newOAuthState = { ...state.oauthState, ...newState };
-      
+
       // Persist to localStorage
       if (typeof window !== 'undefined') {
         localStorage.setItem('mcp_oauth_state', JSON.stringify(newOAuthState));
       }
-      
+
       return { oauthState: newOAuthState };
     };
     set(updatedState);

package/src/studio/lib/types.ts

@@ -54,7 +54,7 @@ export interface ChatMessage {
   content: string;
   toolCalls?: ToolCall[];
   toolCallId?: string;
-  image?: {
+  file?: {
     data: string;
     type: string;
     name: string;