add tutorial

1 files changed, 63 insertions, 2 deletions

diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx
index 668f75a..8f9f202 100644
--- a/frontend/src/components/LeftSidebar.tsx
+++ b/frontend/src/components/LeftSidebar.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { useReactFlow } from 'reactflow';
 import { 
-  Folder, FileText, Archive, ChevronLeft, ChevronRight, Trash2, MessageSquare, 
-  MoreVertical, Download, Upload, Plus, RefreshCw, Edit3, Loader2, LogOut, User, Settings, Key, X, Eye, EyeOff
+  Folder, FileText, Archive, ChevronLeft, ChevronRight, ChevronDown, Trash2, MessageSquare, 
+  MoreVertical, Download, Upload, Plus, RefreshCw, Edit3, Loader2, LogOut, User, Settings, Key, X, Eye, EyeOff, BookOpen
 } from 'lucide-react';
 import useFlowStore, { type FSItem, type BlueprintDocument, type FileMeta } from '../store/flowStore';
 import { useAuthStore } from '../store/authStore';
@@ -59,6 +59,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
   const [showUserSettings, setShowUserSettings] = useState(false);
   const [openaiApiKey, setOpenaiApiKey] = useState('');
   const [geminiApiKey, setGeminiApiKey] = useState('');
+  const [showGuide, setShowGuide] = useState(false);
   const [showOpenaiKey, setShowOpenaiKey] = useState(false);
   const [showGeminiKey, setShowGeminiKey] = useState(false);
   const [savingKeys, setSavingKeys] = useState(false);
@@ -649,6 +650,66 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
                   </p>
                 )}
               </div>
+
+              {/* Quick Guide Section */}
+              <div className={`border-t pt-4 ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
+                <button
+                  onClick={() => setShowGuide(!showGuide)}
+                  className={`w-full flex items-center justify-between text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
+                >
+                  <span className="flex items-center gap-2">
+                    <BookOpen size={16} /> Quick Guide
+                  </span>
+                  {showGuide ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                </button>
+                
+                {showGuide && (
+                  <div className={`mt-3 text-xs space-y-3 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
+                    <div>
+                      <p className={`font-medium mb-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>🎯 Basic Operations</p>
+                      <ul className="list-disc list-inside space-y-1 ml-1">
+                        <li><span className="font-medium">Double-click</span> canvas to create a node</li>
+                        <li><span className="font-medium">Drag</span> from handle to connect nodes</li>
+                        <li><span className="font-medium">Click</span> node to edit in right sidebar</li>
+                        <li><span className="font-medium">Delete</span> key to remove selected node</li>
+                      </ul>
+                    </div>
+                    
+                    <div>
+                      <p className={`font-medium mb-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>🔀 Traces & Branching</p>
+                      <ul className="list-disc list-inside space-y-1 ml-1">
+                        <li><span className="font-medium">Traces</span> = conversation paths through nodes</li>
+                        <li><span className="font-medium">Fork</span> a trace by connecting to new node</li>
+                        <li><span className="font-medium">Merge</span> traces by connecting multiple inputs</li>
+                        <li>Select active traces in the right sidebar</li>
+                      </ul>
+                    </div>
+                    
+                    <div>
+                      <p className={`font-medium mb-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>💬 Quick Chat</p>
+                      <ul className="list-disc list-inside space-y-1 ml-1">
+                        <li>Right-click node → <span className="font-medium">Quick Chat</span></li>
+                        <li>Continue conversation from any trace</li>
+                        <li>Auto-creates connected nodes as you chat</li>
+                      </ul>
+                    </div>
+                    
+                    <div>
+                      <p className={`font-medium mb-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>📎 File Attachments (OpenAI only)</p>
+                      <ul className="list-disc list-inside space-y-1 ml-1">
+                        <li>Upload files in <span className="font-medium">Files</span> tab (left sidebar)</li>
+                        <li>Attach to nodes in <span className="font-medium">Settings</span> tab (right)</li>
+                        <li>LLM can search attached files via <span className="font-medium">file_search</span></li>
+                      </ul>
+                    </div>
+                    
+                    <div className={`p-2 rounded ${isDark ? 'bg-blue-900/30' : 'bg-blue-50'}`}>
+                      <p className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>💡 Tip</p>
+                      <p>Use <span className="font-medium">Ctrl+S</span> to save, or enable auto-save in blueprints.</p>
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Footer */}