mirror of
https://github.com/supabase/supabase.git
synced 2026-05-23 01:39:34 +08:00
a2b01e0bc5
* Add vercel/ai. Commit additional next types. * Add a API route in /app for streaming responses. * Make the components work with streaming response. * Add a dummy page to /app folder to fix a linking bug. * Fix the dummy page. * Fix the dummy page again. * Add an empty layout to the app folder. * Make the code snippets in the chat read-only. * Remove queries and mutations for suggest. * Reset the chat when closing the panel. * Make the AI instructions a bit better. * Don't render empty code blocks. * Try to use remark for rendering the code. Style fixes for CodeBlock in AI assistant panel. * Fix the styling of the definitions when sending them to OpenAI. * Fix the css styling of the messages and code blocks. * Move the suggest API route from app to pages folder. * Revert the change for app API routes. * Make the API route look like the rest of the API routes. * Use Pre instead of Code because the <code> tags aren't working if between spans. * Minor leftovers. * Revert to using app route handlers. * Change the wording on the diff header. * Add nextjs types. * Fix a missing import. * Move AssistantChatForm back to db-new. * Fix a build error. * Rename the suggest route to assistant. * Fix Joshen's comments.
100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
import Editor, { EditorProps, OnMount } from '@monaco-editor/react'
|
|
import { merge, noop } from 'lodash'
|
|
import { editor } from 'monaco-editor'
|
|
import { useRef } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
import { timeout } from 'lib/helpers'
|
|
import Connecting from '../Loading'
|
|
import { alignEditor } from './CodeEditor.utils'
|
|
|
|
interface CodeEditorProps {
|
|
id: string
|
|
language: 'pgsql' | 'json' | 'html' | undefined
|
|
autofocus?: boolean
|
|
defaultValue?: string
|
|
isReadOnly?: boolean
|
|
onInputChange?: (value?: string) => void
|
|
onInputRun?: (value: string) => void
|
|
hideLineNumbers?: boolean
|
|
className?: string
|
|
loading?: boolean
|
|
options?: EditorProps['options']
|
|
value?: string
|
|
}
|
|
|
|
const CodeEditor = ({
|
|
id,
|
|
language,
|
|
defaultValue,
|
|
autofocus = true,
|
|
isReadOnly = false,
|
|
hideLineNumbers = false,
|
|
onInputChange = noop,
|
|
onInputRun = noop,
|
|
className,
|
|
loading,
|
|
options,
|
|
value,
|
|
}: CodeEditorProps) => {
|
|
const editorRef = useRef<editor.IStandaloneCodeEditor>()
|
|
|
|
const onMount: OnMount = async (editor, monaco) => {
|
|
editorRef.current = editor
|
|
alignEditor(editor)
|
|
|
|
editor.addAction({
|
|
id: 'supabase',
|
|
label: 'Run Query',
|
|
keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
|
|
contextMenuGroupId: 'operation',
|
|
contextMenuOrder: 0,
|
|
run: async () => {
|
|
const selectedValue = (editorRef?.current as any)
|
|
.getModel()
|
|
.getValueInRange((editorRef?.current as any)?.getSelection())
|
|
onInputRun(selectedValue || (editorRef?.current as any)?.getValue())
|
|
},
|
|
})
|
|
|
|
await timeout(500)
|
|
if (autofocus) editor?.focus()
|
|
}
|
|
|
|
const optionsMerged = merge(
|
|
{
|
|
tabSize: 2,
|
|
fontSize: 13,
|
|
readOnly: isReadOnly,
|
|
minimap: { enabled: false },
|
|
wordWrap: 'on',
|
|
fixedOverflowWidgets: true,
|
|
contextmenu: true,
|
|
lineNumbers: hideLineNumbers ? 'off' : undefined,
|
|
glyphMargin: hideLineNumbers ? false : undefined,
|
|
lineNumbersMinChars: hideLineNumbers ? 0 : undefined,
|
|
folding: hideLineNumbers ? false : undefined,
|
|
},
|
|
options
|
|
)
|
|
|
|
merge({ cpp: '12' }, { java: '23' }, { python: '35' })
|
|
|
|
return (
|
|
<Editor
|
|
path={id}
|
|
theme="supabase"
|
|
className={cn(className, 'monaco-editor')}
|
|
value={value ?? undefined}
|
|
language={language}
|
|
defaultValue={defaultValue ?? undefined}
|
|
loading={loading || <Connecting />}
|
|
options={optionsMerged}
|
|
onMount={onMount}
|
|
onChange={onInputChange}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default CodeEditor
|