mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Ali Waseem
c39747f8b2
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Any instance where we want to ask the AI assistant, we create a copy prompt button for your agent ## Demo https://github.com/user-attachments/assets/c6afe319-ad36-49b7-a244-a8bf04c809a1 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a new dropdown-style AI assistant trigger across explain, debug, and lint features with improved interaction flow. * Added copy-to-clipboard functionality for AI prompts with visual feedback confirmation. * Enhanced AI assistant integration across query performance, SQL editor, and lint detail interfaces for consistent experience. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { createLintSummaryPrompt, lintInfoMap } from 'components/interfaces/Linter/Linter.utils'
|
|
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
|
import { AiAssistantDropdown } from 'components/ui/AiAssistantDropdown'
|
|
import { Lint } from 'data/lint/lint-query'
|
|
import { DOCS_URL } from 'lib/constants'
|
|
import { useTrack } from 'lib/telemetry/track'
|
|
import { ExternalLink } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
|
|
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
|
|
import { Button } from 'ui'
|
|
|
|
import { Markdown } from '../Markdown'
|
|
import { EntityTypeIcon, LintCTA, LintEntity } from './Linter.utils'
|
|
|
|
interface LintDetailProps {
|
|
lint: Lint
|
|
projectRef: string
|
|
onAskAssistant?: () => void
|
|
}
|
|
|
|
const LintDetail = ({ lint, projectRef, onAskAssistant }: LintDetailProps) => {
|
|
const track = useTrack()
|
|
const snap = useAiAssistantStateSnapshot()
|
|
const { openSidebar } = useSidebarManagerSnapshot()
|
|
|
|
const handleAskAssistant = () => {
|
|
track('advisor_assistant_button_clicked', {
|
|
origin: 'lint_detail',
|
|
advisorCategory: lint.categories[0],
|
|
advisorType: lint.name,
|
|
advisorLevel: lint.level,
|
|
})
|
|
|
|
onAskAssistant?.()
|
|
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
|
|
snap.newChat({
|
|
name: 'Summarize lint',
|
|
initialMessage: createLintSummaryPrompt(lint),
|
|
})
|
|
}
|
|
|
|
const buildPromptForCopy = () => {
|
|
return createLintSummaryPrompt(lint)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="text-sm mb-2">Entity</h3>
|
|
<div className="flex items-center gap-1 px-2 py-0.5 bg-surface-200 border rounded-lg text-sm mb-6 w-fit">
|
|
<EntityTypeIcon type={lint.metadata?.type} />
|
|
<LintEntity metadata={lint.metadata} />
|
|
</div>
|
|
|
|
<h3 className="text-sm mb-2">Issue</h3>
|
|
<Markdown className="leading-6 text-sm text-foreground-light mb-6">
|
|
{lint.detail.replace(/\\`/g, '`')}
|
|
</Markdown>
|
|
<h3 className="text-sm mb-2">Description</h3>
|
|
<Markdown className="text-sm text-foreground-light mb-6">
|
|
{lint.description.replace(/\\`/g, '`')}
|
|
</Markdown>
|
|
|
|
<h3 className="text-sm mb-2">Resolve</h3>
|
|
<div className="flex items-center gap-2">
|
|
<AiAssistantDropdown
|
|
label="Ask Assistant"
|
|
buildPrompt={buildPromptForCopy}
|
|
onOpenAssistant={handleAskAssistant}
|
|
telemetrySource="lint_detail"
|
|
/>
|
|
<LintCTA title={lint.name} projectRef={projectRef} metadata={lint.metadata} />
|
|
<Button asChild type="text">
|
|
<Link
|
|
href={
|
|
lintInfoMap.find((item) => item.name === lint.name)?.docsLink ||
|
|
`${DOCS_URL}/guides/database/database-linter`
|
|
}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="no-underline"
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
Learn more <ExternalLink size={14} />
|
|
</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LintDetail
|