+
+ )
+}
+
+interface ConfirmProps {
+ /**
+ * Result of `getManualToolApprovalConfirmState`. Interactive buttons only for
+ * `approval-requested`; `approval-responded` is the post-approve loading morph.
+ */
+ state?: string
+ message: string
+ cancelLabel?: string
+ confirmLabel?: string
+ confirmLabelLoading?: string
+ extraLoading?: boolean
+ isLoading?: boolean
+ /**
+ * Children fill the remaining height of the card (e.g. `QueryEditor` in viewport
+ * mode). Omit for content-sized bodies like notebook previews.
+ */
+ fill?: boolean
+ className?: string
+ onCancel?: () => void | Promise{message}
+
+
+
+
+
+
+ )
+}
diff --git a/apps/studio/components/ui/AIAssistantPanel/Confirm.utils.test.ts b/apps/studio/components/ui/AIAssistantPanel/Confirm.utils.test.ts
new file mode 100644
index 0000000000000..933e5c0c64c79
--- /dev/null
+++ b/apps/studio/components/ui/AIAssistantPanel/Confirm.utils.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+ getConfirmFooterBar,
+ getManualToolApprovalConfirmState,
+ getManualToolApprovalHandlers,
+ getManualToolApprovalId,
+ USER_SKIPPED_TOOL_REASON,
+} from './Confirm.utils'
+
+describe('getConfirmFooterBar', () => {
+ it('hides the bar when no approval state is provided', () => {
+ expect(getConfirmFooterBar()).toEqual({ show: false, isLoading: false })
+ })
+
+ it('shows the bar while approval is requested', () => {
+ expect(getConfirmFooterBar('approval-requested')).toEqual({ show: true, isLoading: false })
+ })
+
+ it('shows a loading bar after the user approves', () => {
+ expect(getConfirmFooterBar('approval-responded')).toEqual({ show: true, isLoading: true })
+ })
+
+ it('hides the bar for every other tool state', () => {
+ expect(getConfirmFooterBar('input-available')).toEqual({ show: false, isLoading: false })
+ expect(getConfirmFooterBar('output-available')).toEqual({ show: false, isLoading: false })
+ expect(getConfirmFooterBar('output-denied')).toEqual({ show: false, isLoading: false })
+ })
+})
+
+describe('getManualToolApprovalConfirmState', () => {
+ it('shows an interactive footer for a manual approval request', () => {
+ expect(
+ getManualToolApprovalConfirmState({
+ state: 'approval-requested',
+ approval: { id: 'approval-1' },
+ })
+ ).toBe('approval-requested')
+ })
+
+ it('keeps a loading footer after a manual approve', () => {
+ expect(
+ getManualToolApprovalConfirmState({
+ state: 'approval-responded',
+ approval: { id: 'approval-1', approved: true },
+ })
+ ).toBe('approval-responded')
+ })
+
+ it('hides the footer for automatic approvals', () => {
+ expect(
+ getManualToolApprovalConfirmState({
+ state: 'approval-requested',
+ approval: { id: 'approval-1', isAutomatic: true },
+ })
+ ).toBeUndefined()
+ expect(
+ getManualToolApprovalConfirmState({
+ state: 'approval-responded',
+ approval: { id: 'approval-1', approved: true, isAutomatic: true },
+ })
+ ).toBeUndefined()
+ })
+
+ it('hides the footer when the user denied the request', () => {
+ expect(
+ getManualToolApprovalConfirmState({
+ state: 'approval-responded',
+ approval: { id: 'approval-1', approved: false },
+ })
+ ).toBeUndefined()
+ })
+
+ it('ignores non-approval tool states', () => {
+ expect(getManualToolApprovalConfirmState({ state: 'input-available' })).toBeUndefined()
+ expect(getManualToolApprovalConfirmState({ state: 'output-available' })).toBeUndefined()
+ expect(getManualToolApprovalConfirmState({ state: 'output-denied' })).toBeUndefined()
+ })
+})
+
+describe('getManualToolApprovalId', () => {
+ it('returns the approval id only for a manual approval-requested part', () => {
+ expect(
+ getManualToolApprovalId({ state: 'approval-requested', approval: { id: 'approval-1' } })
+ ).toBe('approval-1')
+ expect(
+ getManualToolApprovalId({
+ state: 'approval-requested',
+ approval: { id: 'approval-1', isAutomatic: true },
+ })
+ ).toBeUndefined()
+ expect(
+ getManualToolApprovalId({
+ state: 'approval-responded',
+ approval: { id: 'approval-1', approved: true },
+ })
+ ).toBeUndefined()
+ })
+})
+
+describe('getManualToolApprovalHandlers', () => {
+ it('wires approve and deny only while a manual approval is requested', () => {
+ const addToolApprovalResponse = vi.fn()
+ const { confirmState, onApprove, onDeny } = getManualToolApprovalHandlers({
+ state: 'approval-requested',
+ approval: { id: 'approval-1' },
+ addToolApprovalResponse,
+ })
+
+ expect(confirmState).toBe('approval-requested')
+ onApprove?.()
+ onDeny?.()
+ expect(addToolApprovalResponse).toHaveBeenCalledWith({ id: 'approval-1', approved: true })
+ expect(addToolApprovalResponse).toHaveBeenCalledWith({
+ id: 'approval-1',
+ approved: false,
+ reason: USER_SKIPPED_TOOL_REASON,
+ })
+ })
+
+ it('does not call addToolApprovalResponse for automatic approvals', () => {
+ const addToolApprovalResponse = vi.fn()
+ const handlers = getManualToolApprovalHandlers({
+ state: 'approval-requested',
+ approval: { id: 'approval-1', isAutomatic: true },
+ addToolApprovalResponse,
+ })
+
+ expect(handlers).toEqual({ confirmState: undefined })
+ expect(addToolApprovalResponse).not.toHaveBeenCalled()
+ })
+})
diff --git a/apps/studio/components/ui/AIAssistantPanel/Confirm.utils.ts b/apps/studio/components/ui/AIAssistantPanel/Confirm.utils.ts
new file mode 100644
index 0000000000000..9ce728c929417
--- /dev/null
+++ b/apps/studio/components/ui/AIAssistantPanel/Confirm.utils.ts
@@ -0,0 +1,86 @@
+export type ConfirmFooterApprovalState = 'approval-requested' | 'approval-responded'
+
+/** Sent with Skip so the model sees a user choice, not the SDK default "Tool execution denied." */
+export const USER_SKIPPED_TOOL_REASON = 'The user skipped this action.'
+
+export type ToolApprovalFields = {
+ id?: string
+ approved?: boolean
+ /** AI SDK v7: automatic policy decisions must not get a confirm footer or response. */
+ isAutomatic?: boolean
+}
+
+/**
+ * Whether the confirm bar should render, and whether it is in the post-approve loading
+ * morph. Driven by the AI SDK tool approval state; any other state hides the bar.
+ */
+export function getConfirmFooterBar(state?: string): { show: boolean; isLoading: boolean } {
+ if (state === 'approval-requested') return { show: true, isLoading: false }
+ if (state === 'approval-responded') return { show: true, isLoading: true }
+ return { show: false, isLoading: false }
+}
+
+/**
+ * Maps a tool part onto the confirm footer. Follows the AI SDK `useChat` rule:
+ * interactive Approve/Deny only for `approval-requested` when `!approval.isAutomatic`.
+ * `approval-responded` keeps a loading morph after a manual approve; denials and
+ * automatic decisions hide the bar.
+ *
+ * @see https://ai-sdk.dev/docs/agents/tool-approvals
+ */
+export function getManualToolApprovalConfirmState({
+ state,
+ approval,
+}: {
+ state: string
+ approval?: ToolApprovalFields
+}): ConfirmFooterApprovalState | undefined {
+ if (approval?.isAutomatic) return undefined
+ if (state === 'approval-requested') return 'approval-requested'
+ if (state === 'approval-responded' && approval?.approved !== false) return 'approval-responded'
+ return undefined
+}
+
+export function getManualToolApprovalId({
+ state,
+ approval,
+}: {
+ state: string
+ approval?: ToolApprovalFields
+}): string | undefined {
+ if (state !== 'approval-requested' || approval?.isAutomatic) return undefined
+ return approval?.id
+}
+
+export function getManualToolApprovalHandlers({
+ state,
+ approval,
+ addToolApprovalResponse,
+}: {
+ state: string
+ approval?: ToolApprovalFields
+ addToolApprovalResponse?: (args: {
+ id: string
+ approved: boolean
+ reason?: string
+ }) => void | PromiseLike
+ {children}
+
+ {bar.show && (
+
-
- )
-}
diff --git a/apps/studio/components/ui/AIAssistantPanel/DisplayBlockRenderer.tsx b/apps/studio/components/ui/AIAssistantPanel/DisplayBlockRenderer.tsx
index 908b947dc095f..bd2eb1620709a 100644
--- a/apps/studio/components/ui/AIAssistantPanel/DisplayBlockRenderer.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/DisplayBlockRenderer.tsx
@@ -8,7 +8,7 @@ import { useRef, useState, type DragEvent, type PropsWithChildren } from 'react'
import { DEFAULT_CHART_CONFIG, QueryBlock } from '../QueryBlock/QueryBlock'
import { identifyQueryType } from './AIAssistant.utils'
-import { ConfirmFooter } from './ConfirmFooter'
+import { ConfirmFooter } from './Confirm'
import { ChartConfig } from '@/components/interfaces/SQLEditor/UtilityPanel/ChartConfig'
import { entityTypeKeys } from '@/data/entity-types/keys'
import { lintKeys } from '@/data/lint/keys'
diff --git a/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.test.tsx b/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.test.tsx
index 0d22406570bce..bae71ec86c3d5 100644
--- a/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.test.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.test.tsx
@@ -1,5 +1,6 @@
import { screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
+import { type ReactNode } from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { EdgeFunctionRenderer } from './EdgeFunctionRenderer'
@@ -70,17 +71,22 @@ vi.mock('../EdgeFunctionBlock/EdgeFunctionBlock', () => ({
),
}))
-vi.mock('./ConfirmFooter', () => ({
- ConfirmFooter: ({
+vi.mock('./Confirm', () => ({
+ Confirm: ({
+ children,
confirmLabel,
onConfirm,
}: {
+ children?: ReactNode
confirmLabel?: string
onConfirm?: () => void
}) => (
-
+ {message}
-
-
-
-
-
+ {children}
+
+
),
}))
@@ -104,6 +110,7 @@ describe('EdgeFunctionRenderer', () => {
label="Deploy Edge Function"
code="Deno.serve(() => new Response('ok'))"
functionName="hello-world"
+ confirmState="approval-requested"
onApprove={onApprove}
/>
)
@@ -132,6 +139,7 @@ describe('EdgeFunctionRenderer', () => {
label="Deploy Edge Function"
code="Deno.serve(() => new Response('ok'))"
functionName="hello-world"
+ confirmState="approval-requested"
onApprove={onApprove}
/>
)
diff --git a/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.tsx b/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.tsx
index bb5c4079511e3..d22e46c9cd537 100644
--- a/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/EdgeFunctionRenderer.tsx
@@ -1,8 +1,9 @@
import { useParams } from 'common'
-import { useMemo, useState, type PropsWithChildren } from 'react'
+import { useMemo, useState } from 'react'
import { EdgeFunctionBlock } from '../EdgeFunctionBlock/EdgeFunctionBlock'
-import { ConfirmFooter } from './ConfirmFooter'
+import { Confirm } from './Confirm'
+import { type ConfirmFooterApprovalState } from './Confirm.utils'
import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
import { useEdgeFunctionQuery } from '@/data/edge-functions/edge-function-query'
import { useTrack } from '@/lib/telemetry/track'
@@ -15,7 +16,7 @@ interface EdgeFunctionRendererProps {
onDeny?: () => void
isDeploying?: boolean
initialIsDeployed?: boolean
- showConfirmFooter?: boolean
+ confirmState?: ConfirmFooterApprovalState
}
export const EdgeFunctionRenderer = ({
@@ -26,8 +27,8 @@ export const EdgeFunctionRenderer = ({
onDeny,
isDeploying = false,
initialIsDeployed,
- showConfirmFooter = true,
-}: PropsWithChildren
+
setShowReplaceWarning(false)}
onConfirmReplace={approveDeploy}
/>
- {showConfirmFooter && (
-
+
)
}
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
index fc3132f9b5e17..d53bb3e099d4d 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
@@ -3,6 +3,7 @@ import { type DynamicToolUIPart, type ReasoningUIPart, type TextUIPart, type Too
import { BrainIcon, CheckIcon, Loader2 } from 'lucide-react'
import { cn } from 'ui'
+import { getManualToolApprovalHandlers, USER_SKIPPED_TOOL_REASON } from './Confirm.utils'
import { DisplayBlockRenderer } from './DisplayBlockRenderer'
import { EdgeFunctionRenderer } from './EdgeFunctionRenderer'
import { Tool } from './elements/Tool'
@@ -166,7 +167,12 @@ function MessagePartExecuteSql({
}
onDeny={
approvalId
- ? () => addToolApprovalResponse?.({ id: approvalId, approved: false })
+ ? () =>
+ addToolApprovalResponse?.({
+ id: approvalId,
+ approved: false,
+ reason: USER_SKIPPED_TOOL_REASON,
+ })
: undefined
}
/>
@@ -211,24 +217,22 @@ function MessagePartDeployEdgeFunction({ toolPart }: { toolPart: ToolUIPart }) {
const isInitiallyDeployed =
state === 'output-available' && parsedOutput.success && parsedOutput.data.success === true
- const approvalId = state === 'approval-requested' ? toolPart.approval?.id : undefined
+ const { confirmState, onApprove, onDeny } = getManualToolApprovalHandlers({
+ state,
+ approval: toolPart.approval,
+ addToolApprovalResponse,
+ })
return (
- onDeny?.()}
- onConfirm={handleDeploy}
- />
-
- )}
-
- {type === 'bar' && (
-
+
-
- )
-}
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Display.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Display.tsx
index eb8451215edb1..a6cd55409fa5f 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.Display.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.Display.tsx
@@ -53,8 +53,7 @@ function MessageDisplayContent({ message }: { message: VercelMessage }) {
-
- {shouldShowConfirmFooter && (
-
-
- )}
-
{messageParts?.length > 0
? messageParts.map((part: NonNullable, idx) => {
- const isLastPart = idx === messageParts.length - 1
- return
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
index d53bb3e099d4d..62cd84b4ba2b5 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
@@ -3,8 +3,8 @@ import { type DynamicToolUIPart, type ReasoningUIPart, type TextUIPart, type Too
import { BrainIcon, CheckIcon, Loader2 } from 'lucide-react'
import { cn } from 'ui'
-import { getManualToolApprovalHandlers, USER_SKIPPED_TOOL_REASON } from './Confirm.utils'
-import { DisplayBlockRenderer } from './DisplayBlockRenderer'
+import { AssistantQueryCell } from './AssistantQueryCell'
+import { getManualToolApprovalHandlers } from './Confirm.utils'
import { EdgeFunctionRenderer } from './EdgeFunctionRenderer'
import { Tool } from './elements/Tool'
import { useMessageActionsContext, useMessageInfoContext } from './Message.Context'
@@ -111,14 +111,8 @@ function ToolDisplayExecuteSqlFailure() {
return [number]
- isLastPart?: boolean
}) {
switch (part.type) {
case 'dynamic-tool': {
@@ -323,7 +300,7 @@ export function MessagePartSwitcher({
return (
() => import('streamdown').then((mod) => mod.Streamdown),
@@ -188,7 +178,7 @@ export function MessageMarkdown({
export const MarkdownPre = ({
children,
id,
- isLoading: _isLoading,
+ isLoading,
readOnly,
}: {
children: any
@@ -196,15 +186,6 @@ export const MarkdownPre = ({
isLoading: boolean
readOnly?: boolean
}) => {
- // [Joshen] Using a ref as this data doesn't need to trigger a re-render
- const chartConfig = useRef({
- view: 'table',
- type: 'bar',
- xKey: '',
- yKey: '',
- cumulative: false,
- })
-
const childArray = Array.isArray(children) ? children : [children]
const codeElement = childArray.find(
(child): child is ReactElement<{ className?: string; children: ReactNode }> =>
@@ -231,23 +212,13 @@ export const MarkdownPre = ({
const { xAxis, yAxis } = snippetProps
const snippetId = snippetProps.id
- const title = snippetProps.title || (language === 'edge' ? 'Edge Function' : 'SQL Query')
+ const title = snippetProps.title || (language === 'edge' ? 'Edge Function' : 'SQL query')
const isChart = snippetProps.isChart === 'true'
// Strip props from the content for both SQL and edge functions
const cleanContent = rawContent.replace(/(?:--|\/\/)\s*props:\s*\{[^}]+\}/, '').trim()
const toolCallId = String(snippetId ?? id)
- useEffect(() => {
- chartConfig.current = {
- ...chartConfig.current,
- view: isChart ? 'chart' : 'table',
- xKey: xAxis ?? '',
- yKey: yAxis ?? '',
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [snippetProps])
-
if (!codeElement) {
return {}}
- showConfirmFooter={false}
- onChartConfigChange={(config) => {
- chartConfig.current = { ...config }
- }}
+
Failed to execute SQL.
}
-function MessagePartExecuteSql({
- toolPart,
- isLastPart,
-}: {
- toolPart: ToolUIPart
- isLastPart?: boolean
-}) {
- const { id, isLastMessage } = useMessageInfoContext()
+function MessagePartExecuteSql({ toolPart }: { toolPart: ToolUIPart }) {
+ const { id } = useMessageInfoContext()
const { addToolApprovalResponse } = useMessageActionsContext()
const { toolCallId, state, input, output } = toolPart
@@ -141,40 +135,25 @@ function MessagePartExecuteSql({
state === 'output-denied' ||
state === 'output-available'
) {
- const approvalId = state === 'approval-requested' ? toolPart.approval?.id : undefined
+ const { confirmState, onApprove, onDeny } = getManualToolApprovalHandlers({
+ state,
+ approval: toolPart.approval,
+ addToolApprovalResponse,
+ })
+
return (
- addToolApprovalResponse?.({ id: approvalId, approved: true })
- : undefined
- }
- onDeny={
- approvalId
- ? () =>
- addToolApprovalResponse?.({
- id: approvalId,
- approved: false,
- reason: USER_SKIPPED_TOOL_REASON,
- })
- : undefined
- }
+
)
@@ -302,10 +281,8 @@ const MessagePart = {
export function MessagePartSwitcher({
part,
- isLastPart,
}: {
part: NonNullable{children}
}
@@ -265,22 +236,14 @@ export const MarkdownPre = ({
readOnly ? (