diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx index 92583bd4d4c..50198dd9fab 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx @@ -1,7 +1,13 @@ import { MousePointerClick, X } from 'lucide-react' import { + AiIconAnimation, Button, CodeBlock, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuTrigger, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_, @@ -11,6 +17,8 @@ import { import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer' import type { LogData, QueryType } from './Logs.types' import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' +import { useAppStateSnapshot } from 'state/app-state' +import { useChatInputRef } from 'components/ui/AIAssistantPanel/AIAssistant' export interface LogSelectionProps { log?: LogData @@ -28,8 +36,6 @@ const LogSelection = ({ log, onClose, queryType, isLoading, error }: LogSelectio if (!log) return switch (queryType) { - // case 'warehouse': - // return case 'api': const status = log?.metadata?.[0]?.response?.[0]?.status_code const method = log?.metadata?.[0]?.request?.[0]?.method @@ -54,25 +60,70 @@ const LogSelection = ({ log, onClose, queryType, isLoading, error }: LogSelectio return } } + const { setAiAssistantPanel } = useAppStateSnapshot() + const { ref: inputRef } = useChatInputRef() + const focusInput = () => { + setTimeout(() => { + inputRef.current?.focus() + }, 600) + } return (
- - + + Details Raw - +
+ + + + + + + AI Assistant + + { + setAiAssistantPanel({ + open: true, + initialInput: `Provide a concise explanation of the following log from the Supabase ${queryType} logs. \n\`\`\`json +${JSON.stringify(log)}\n\`\`\``, + }) + focusInput() + }} + > + Explain + + { + setAiAssistantPanel({ + open: true, + initialInput: `Troubleshoot the following log from the Supabase ${queryType} logs and provide a concise step by step guide on how to fix it.\n\`\`\`json +${JSON.stringify(log)} +\n\`\`\``, + }) + + focusInput() + }} + > + Troubleshoot + + + + +
{isLoading ? ( diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx index 7af8600b5b2..936b52da4d4 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx @@ -68,6 +68,20 @@ interface AIAssistantProps { onResetConversation: () => void } +export const useChatInputRef = () => { + const ref = useRef(null) + + useEffect(() => { + if (ref.current) { + ref.current.focus() + } + }, []) + + return { + ref, + } +} + export const AIAssistant = ({ id, initialMessages, @@ -87,7 +101,7 @@ export const AIAssistant = ({ const { aiAssistantPanel, setAiAssistantPanel, saveLatestMessage } = useAppStateSnapshot() const { open, initialInput, sqlSnippets, suggestions } = aiAssistantPanel - const inputRef = useRef(null) + const { ref: inputRef } = useChatInputRef() const { ref: scrollContainerRef, isSticky, scrollToEnd } = useAutoScroll() const [value, setValue] = useState(initialInput) diff --git a/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx b/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx index 8f37b777283..dba025160ff 100644 --- a/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx +++ b/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx @@ -84,7 +84,7 @@ const AssistantChatFormComponent = React.forwardRef( ref={textAreaRef} autoFocus={isMobile} disabled={disabled} - className={cn(icon ? 'pl-12' : '', 'text-sm pr-10 rounded-[18px]')} + className={cn(icon ? 'pl-12' : '', 'text-sm pr-10 rounded-[18px] max-h-[160px]')} placeholder={placeholder} spellCheck={false} value={value}