mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 23:29:08 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { type ToolUIPart } from 'ai'
|
|
import { Loader2Icon } from 'lucide-react'
|
|
|
|
import { AssistantQueryCell } from './AssistantQueryCell'
|
|
import { useMessageInfoContext } from './Message.Context'
|
|
import {
|
|
getAssistantLogsQueryTitle,
|
|
getAssistantLogsTimeRange,
|
|
parseQueryLogsInput,
|
|
toQueryLogsResult,
|
|
} from './MessagePartQueryLogs.utils'
|
|
|
|
type QueryLogsToolPart = Pick<
|
|
ToolUIPart,
|
|
'toolCallId' | 'state' | 'input' | 'output' | 'errorText'
|
|
> & { rawInput?: unknown }
|
|
|
|
function QueryLogsFailure() {
|
|
return <div className="text-xs text-danger">Failed to query logs.</div>
|
|
}
|
|
|
|
export function MessagePartQueryLogs({ toolPart }: { toolPart: QueryLogsToolPart }) {
|
|
const { id } = useMessageInfoContext()
|
|
const { toolCallId, state, input: submittedInput, rawInput, output } = toolPart
|
|
|
|
if (state === 'input-streaming' || state === 'input-available') {
|
|
return (
|
|
<div className="my-4 rounded-lg border bg-surface-75 heading-meta h-9 px-3 text-foreground-light flex items-center gap-2">
|
|
<Loader2Icon className="w-4 h-4 animate-spin" />
|
|
Querying logs...
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (state !== 'output-available' && state !== 'output-error') return null
|
|
|
|
const parsedInput = parseQueryLogsInput(submittedInput ?? rawInput)
|
|
if (!parsedInput.success) return <QueryLogsFailure />
|
|
|
|
const result =
|
|
state === 'output-error'
|
|
? { rows: [], error: { message: toolPart.errorText ?? 'Failed to query logs' } }
|
|
: toQueryLogsResult(output)
|
|
if (!result) return <QueryLogsFailure />
|
|
|
|
return (
|
|
<div className="w-auto overflow-x-hidden my-4 space-y-2">
|
|
<AssistantQueryCell
|
|
id={`${id}-${toolCallId}`}
|
|
sql={parsedInput.data.sql}
|
|
title={getAssistantLogsQueryTitle(parsedInput.data.sql)}
|
|
source={{
|
|
_tag: 'logs',
|
|
time_range: getAssistantLogsTimeRange(
|
|
parsedInput.data.iso_timestamp_start,
|
|
parsedInput.data.iso_timestamp_end
|
|
),
|
|
}}
|
|
initialResult={result}
|
|
confirmState={state === 'output-error' ? 'error' : undefined}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|