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}