mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
Saxon Fletcher
033daf223c
Re-adds support form Assistant response using a lighter weight Streamdown component vs the more heavy `Message` component. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * AI Assistant follow-up card after ticket submission for project-scoped requests. * In-chat support request preview panels showing submitted subject and message. * **Improvements** * Smarter project selection when opening the support form via route/context. * Success screen: cleaner layout, project-name messaging, optional finish action, and a "Join Discord" button. * Category prompt text updated to "What issue are you having?" * New success/feedback section for consistent layouts. * **Tests** * Added tests covering support prompt serialization/parsing and UI previews. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46248?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { Check } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Button, IconDiscord } from 'ui'
|
|
|
|
import { NO_PROJECT_MARKER } from './SupportForm.utils'
|
|
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
|
|
import { useProfile } from '@/lib/profile'
|
|
|
|
interface SuccessProps {
|
|
sentCategory?: string
|
|
selectedProject?: string
|
|
onFinish?: () => void
|
|
finishLabel?: string
|
|
showFinishAction?: boolean
|
|
}
|
|
|
|
export const Success = ({
|
|
sentCategory: _sentCategory = '',
|
|
selectedProject = NO_PROJECT_MARKER,
|
|
onFinish,
|
|
finishLabel = 'Finish',
|
|
showFinishAction = true,
|
|
}: SuccessProps) => {
|
|
const { profile } = useProfile()
|
|
const respondToEmail = profile?.primary_email ?? 'your email'
|
|
|
|
const { data: project } = useProjectDetailQuery(
|
|
{ ref: selectedProject },
|
|
{ enabled: selectedProject !== NO_PROJECT_MARKER }
|
|
)
|
|
const projectName = project ? project.name : 'No specific project'
|
|
|
|
const finishAction = showFinishAction ? (
|
|
onFinish ? (
|
|
<Button type="default" onClick={onFinish}>
|
|
{finishLabel}
|
|
</Button>
|
|
) : (
|
|
<Button asChild type="default">
|
|
<Link href="/">{finishLabel}</Link>
|
|
</Button>
|
|
)
|
|
) : null
|
|
|
|
return (
|
|
<div className="flex w-full flex-col items-center gap-4 px-4 pt-4 text-center">
|
|
<Check strokeWidth={1.5} size={24} className="text-brand" />
|
|
|
|
<div className="flex max-w-[620px] flex-col items-center gap-2">
|
|
<h3 className="text-xl">Support request sent</h3>
|
|
<p className="text-balance text-sm text-foreground-light">
|
|
{selectedProject !== NO_PROJECT_MARKER && (
|
|
<>
|
|
Your ticket has been logged for{' '}
|
|
<span className="font-medium text-foreground">{projectName}</span>.{' '}
|
|
</>
|
|
)}
|
|
We'll reach out at{' '}
|
|
<span className="font-medium text-foreground">{respondToEmail}</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-3">
|
|
{finishAction}
|
|
<Button
|
|
asChild
|
|
type="default"
|
|
icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
|
|
>
|
|
<Link href="https://discord.supabase.com/" target="_blank">
|
|
Join Discord
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|