mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Joshen LimandSaxon Fletcher
12d92aed99
* start * added panels * remove stuff * fixes and refinements * clean up * remove old assistant panel * resizable assistant kinda * use icon * Add missing package * remove canvas * add suggestions * updated empty state if no tables exist * fix table condition * Implement diffing if using assistant in sql editor * Reinstate old assistant in SQL editor if feature preview is off * pane size adjustment * assistant button corners * Add SQL snippet content to assistant if opening assistant in sql editor * Add the necessary checks for opt in and hipaa * revert adding snippet to assistant when opening assistant in sql editor * Add cmd i shortcut * Add admonitions for when disablePrompt is toggled on, and if no api key is set. Add footer note RE rate limitation * Bump ai package in packages * some fixes for backwards compability depending on feature preview toggled * Rename feature preview property for new assistant * Smol fix * Prevent SQL snippet from running until message is finished * only loading last message * fix z-index * save chat state to global state * add debug to failed ai queries * Add basic contextual invalidation * Add explain code action to SQL editor * Add link to abort ongoing queries from SqlSnippet * Update feature preview content * Fix * Fix * Fix * Te4st * Fix tests * ONly show ai button within a project * Fix PH tracking * Beef up a bit more event tracking * Rough fix to padding when assistant is open * A bit more telemetry stuff * Update prompts * fix rls editing via assistant * Update generate-v3.ts prompt to get auth schema too * Add policy satement to assistant when editing * Address all comments * fixc * Fix SqlSnippet not taking full width on larger viewports * Adjust max width --------- Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { ChevronDown, ChevronUp, X } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { Button, CodeBlock, CodeBlockProps, cn } from 'ui'
|
|
|
|
interface CollapsibleCodeBlockProps extends CodeBlockProps {
|
|
onRemove?: () => void
|
|
}
|
|
|
|
const CollapsibleCodeBlock = ({ onRemove, ...props }: CollapsibleCodeBlockProps) => {
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
|
const codeString = (props.value || props.children) as string
|
|
const firstLine = isExpanded
|
|
? codeString
|
|
: codeString?.substring(0, codeString.indexOf('\n')) || codeString
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-1 p-1 bg-surface-100 border border-default w-full overflow-hidden',
|
|
'rounded-md'
|
|
)}
|
|
>
|
|
<Button
|
|
type="text"
|
|
size="tiny"
|
|
className="w-6 h-6"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
icon={isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
|
/>
|
|
<div className="flex-1 shrink-1 overflow-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
|
|
<CodeBlock
|
|
{...props}
|
|
value={firstLine}
|
|
hideCopy
|
|
className={cn(
|
|
'block !bg-transparent max-h-32 max-w-full !py-0 !px-0 !border-t-0 prose dark:prose-dark border-0 text-foreground !rounded-none w-full text-wrap whitespace-pre-wrap',
|
|
// change the look of the code block. The flex hack is so that the code is wrapping since
|
|
// every word is a separate span
|
|
'[&>code]:m-0 [&>code>span]:flex border-t-0 [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground text-wrap whitespace-pre-wrap',
|
|
props.className
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{onRemove && (
|
|
<Button
|
|
type="text"
|
|
size="tiny"
|
|
className="shrink-0 w-6 h-6"
|
|
onClick={onRemove}
|
|
icon={<X size={14} />}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CollapsibleCodeBlock
|