-
+
)
}
diff --git a/packages/web-ui/src/ds/molecules/DocumentTextEditor/index.tsx b/packages/web-ui/src/ds/molecules/DocumentTextEditor/index.tsx
index 144165c18..c314233fe 100644
--- a/packages/web-ui/src/ds/molecules/DocumentTextEditor/index.tsx
+++ b/packages/web-ui/src/ds/molecules/DocumentTextEditor/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import React, { lazy } from 'react'
+import React, { lazy, useEffect, useState } from 'react'
import type { ConversationMetadata } from '@latitude-data/compiler'
@@ -10,6 +10,7 @@ export type DocumentTextEditorProps = {
value: string
metadata?: ConversationMetadata
onChange?: (value: string) => void
+ readOnlyMessage?: string
}
const DocumentTextEditor = lazy(() =>
@@ -25,7 +26,15 @@ function EditorWrapper(props: DocumentTextEditorProps) {
// When imported, Monaco automatically tries to use the window object.
// Since this is not available when rendering on the server, we only
// render the fallback component for SSR.
- if (typeof window === 'undefined') return
+ const [isBrowser, setIsBrowser] = useState(false)
+
+ useEffect(() => {
+ setIsBrowser(typeof window !== 'undefined')
+ }, [])
+
+ if (!isBrowser) {
+ return
+ }
return
}
diff --git a/packages/web-ui/src/index.ts b/packages/web-ui/src/index.ts
index dcaf82620..42ca5d80d 100644
--- a/packages/web-ui/src/index.ts
+++ b/packages/web-ui/src/index.ts
@@ -2,9 +2,4 @@ export * from './ds/tokens'
export * from './ds/atoms'
export * from './ds/molecules'
export * from './providers'
-
-export { default as DocumentSidebar } from './sections/Document/Sidebar'
-export type { SidebarDocument } from './sections/Document/Sidebar/Files/useTree'
-
-export { default as DocumentDetailWrapper } from './sections/Document/DetailWrapper'
-export * from './sections/Document/Sidebar/Files'
+export * from './sections'
diff --git a/packages/web-ui/src/sections/Document/Editor/index.tsx b/packages/web-ui/src/sections/Document/Editor/index.tsx
index 0ba88a97a..a7611e299 100644
--- a/packages/web-ui/src/sections/Document/Editor/index.tsx
+++ b/packages/web-ui/src/sections/Document/Editor/index.tsx
@@ -1,6 +1,13 @@
'use client'
-import { ReactNode, Suspense, useEffect, useMemo, useState } from 'react'
+import {
+ ReactNode,
+ Suspense,
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react'
import { ConversationMetadata, readMetadata } from '@latitude-data/compiler'
import { Badge, Input, Text } from '$ui/ds/atoms'
@@ -8,6 +15,8 @@ import {
DocumentTextEditor,
DocumentTextEditorFallback,
} from '$ui/ds/molecules'
+import { useCurrentCommit } from '$ui/providers'
+import { useDebouncedCallback } from 'use-debounce'
function Header({ title, children }: { title: string; children?: ReactNode }) {
return (
@@ -18,26 +27,51 @@ function Header({ title, children }: { title: string; children?: ReactNode }) {
)
}
-export function DocumentEditor({ document }: { document: string }) {
+export default function DocumentEditor({
+ document,
+ saveDocumentContent,
+ readDocument,
+}: {
+ document: string
+ saveDocumentContent: (content: string) => void
+ readDocument?: (uuid: string) => Promise
+}) {
const [value, setValue] = useState(document)
const [metadata, setMetadata] = useState()
+
+ const { commit } = useCurrentCommit()
+
+ const debouncedSave = useDebouncedCallback(saveDocumentContent, 2_000)
+
+ const onChange = useCallback((value: string) => {
+ setValue(value)
+ debouncedSave(value)
+ }, [])
+
useEffect(() => {
- readMetadata({ prompt: value }).then(setMetadata)
- }, [value])
+ readMetadata({
+ prompt: value,
+ referenceFn: readDocument,
+ }).then(setMetadata)
+ }, [value, readDocument])
+
const inputs = useMemo(() => {
if (!metadata) return []
return Array.from(metadata.parameters)
}, [metadata])
return (
-
+
}>
diff --git a/packages/web-ui/src/sections/index.ts b/packages/web-ui/src/sections/index.ts
new file mode 100644
index 000000000..1626a1814
--- /dev/null
+++ b/packages/web-ui/src/sections/index.ts
@@ -0,0 +1,7 @@
+export { default as DocumentSidebar } from './Document/Sidebar'
+export type { SidebarDocument } from './Document/Sidebar/Files/useTree'
+
+export { default as DocumentDetailWrapper } from './Document/DetailWrapper'
+export * from './Document/Sidebar/Files'
+
+export { default as DocumentEditor } from './Document/Editor'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86333ce49..139fa716b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -416,6 +416,9 @@ importers:
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.4)
+ use-debounce:
+ specifier: ^10.0.1
+ version: 10.0.1(react@18.3.0)
zod:
specifier: ^3.23.8
version: 3.23.8
@@ -8775,6 +8778,15 @@ packages:
tslib: 2.6.3
dev: false
+ /use-debounce@10.0.1(react@18.3.0):
+ resolution: {integrity: sha512-0uUXjOfm44e6z4LZ/woZvkM8FwV1wiuoB6xnrrOmeAEjRDDzTLQNRFtYHvqUsJdrz1X37j0rVGIVp144GLHGKg==}
+ engines: {node: '>= 16.0.0'}
+ peerDependencies:
+ react: '>=16.8.0 || 19.x'
+ dependencies:
+ react: 18.3.0
+ dev: false
+
/use-sidecar@1.1.2(@types/react@18.3.0)(react@18.3.0):
resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
engines: {node: '>=10'}