mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +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 -->
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
interface SupportSuccessSectionProps {
|
|
icon?: ReactNode
|
|
title: string
|
|
description: ReactNode
|
|
action?: ReactNode
|
|
children?: ReactNode
|
|
className?: string
|
|
headerClassName?: string
|
|
}
|
|
|
|
export function SupportSuccessSection({
|
|
icon,
|
|
title,
|
|
description,
|
|
action,
|
|
children,
|
|
className,
|
|
headerClassName,
|
|
}: SupportSuccessSectionProps) {
|
|
const hasIcon = icon !== undefined
|
|
|
|
return (
|
|
<div className={cn('w-full py-1', className)}>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
className={cn(
|
|
'flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between',
|
|
headerClassName
|
|
)}
|
|
>
|
|
<div className={cn('flex min-w-0 flex-1 items-start', hasIcon ? 'gap-3' : 'gap-0')}>
|
|
{hasIcon && (
|
|
<div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-background">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 space-y-1">
|
|
<h4 className="text-sm font-medium text-foreground">{title}</h4>
|
|
<div className="text-sm text-foreground-light">{description}</div>
|
|
</div>
|
|
</div>
|
|
{action && <div className="shrink-0 sm:ml-4">{action}</div>}
|
|
</div>
|
|
{children && <div className={cn(hasIcon && 'sm:pl-[52px]')}>{children}</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|