@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/writing/DraftAssistantDialog.tsx

@@ -1,279 +1,279 @@
-import { Button } from '../components/common/buttons/Button.js'
-import { Checkbox } from '../components/common/inputs/Checkbox.js'
-import { InlineBanner } from '../components/common/feedback/InlineBanner.js'
-import { TextAreaField } from '../components/common/inputs/TextAreaField.js'
-import { Modal } from '../components/common/overlays/Modal.js'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { styled } from 'styled-components'
-import { buildStyleGuidance, type WritingStyle } from './writingStyle.js'
-import { WritingStyleManager } from './WritingStyleManager.js'
-import { draftTextWithAgent, type DraftTextMode } from './draftTextWithAgent.js'
-
-//#region styled-components
-
-/** Full-page shell: a centered, readable column that fills the modal. */
-const StyledShell = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  max-width: 920px;
-  margin: 0 auto;
-  padding: var(--platform-spacing-lg);
-  box-sizing: border-box;
-  gap: var(--platform-spacing-md);
-`
-
-const StyledBody = styled.div`
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-md);
-`
-
-const StyledLabel = styled.span`
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: var(--platform-typography-font-weight-bold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-`
-
-const StyledSelectionQuote = styled.blockquote`
-  margin: 0;
-  padding: 8px 12px;
-  border-left: 3px solid var(--platform-colors-border);
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-  max-height: 120px;
-  overflow: auto;
-`
-
-const StyledPreview = styled.div`
-  min-height: 200px;
-  max-height: min(64vh, 760px);
-  overflow: auto;
-  padding: var(--platform-spacing-md);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-sm);
-  background: var(--platform-colors-surface);
-  line-height: 1.5;
-
-  h2 {
-    font-size: 1.1rem;
-    margin: 0.6em 0 0.2em;
-  }
-  p {
-    margin: 0 0 0.6em;
-  }
-`
-
-const StyledPreviewEmpty = styled.div`
-  display: flex;
-  min-height: 160px;
-  align-items: center;
-  justify-content: center;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-  text-align: center;
-`
-
-const StyledToggle = styled.label`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--platform-typography-font-size-sm);
-  color: var(--platform-colors-text-primary);
-`
-
-const StyledActions = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--platform-spacing-sm);
-  margin-top: var(--platform-spacing-md);
-`
-
-//#endregion
-
-export interface DraftAssistantDialogProps {
-  open: boolean
-  mode: DraftTextMode
-  selectionText: string
-  /** The saved writing-style library (host owns persistence). */
-  styles: WritingStyle[]
-  /** Persist library edits (CRUD / distilled skills) made inside the dialog. */
-  onStylesChange: (styles: WritingStyle[]) => void
-  /**
-   * Optional grounding/reference material (e.g. a manuscript's abstract and
-   * references). Used for factual accuracy, not voice. When present, a "Ground
-   * in document" toggle appears so the author can include or omit it.
-   */
-  context?: string
-  onClose: () => void
-  onInsert: (html: string) => void
-}
-
-export function DraftAssistantDialog({
-  open,
-  mode,
-  selectionText,
-  styles,
-  onStylesChange,
-  context,
-  onClose,
-  onInsert,
-}: DraftAssistantDialogProps): React.ReactElement | null {
-  const [instruction, setInstruction] = useState('')
-  const [selectedIds, setSelectedIds] = useState<string[]>([])
-  const [useContext, setUseContext] = useState(true)
-  const [generating, setGenerating] = useState(false)
-  const [result, setResult] = useState('')
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!open) return
-    setResult('')
-    setError(null)
-    setUseContext(true)
-  }, [open])
-
-  const selectedStyles = useMemo(
-    () => styles.filter(style => selectedIds.includes(style.id)),
-    [selectedIds, styles],
-  )
-
-  const generate = useCallback(async () => {
-    setGenerating(true)
-    setError(null)
-    try {
-      const styleGuidance = buildStyleGuidance(selectedStyles)
-      const html = await draftTextWithAgent({
-        mode,
-        instruction,
-        selectionText,
-        styleGuidance,
-        context: useContext ? context : undefined,
-      })
-      if (!html) {
-        setError('The model did not return anything. Try again.')
-        return
-      }
-      setResult(html)
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause))
-    } finally {
-      setGenerating(false)
-    }
-  }, [context, instruction, mode, selectedStyles, selectionText, useContext])
-
-  if (!open) return null
-
-  return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      title={mode === 'rewrite' ? 'Redraft selection' : 'Draft with AI'}
-      size="fullscreen"
-      chrome
-      closeOnBackdropClick={!generating}
-    >
-      <StyledShell>
-      <StyledBody>
-        {mode === 'rewrite' && selectionText ? (
-          <div>
-            <StyledLabel>Selected</StyledLabel>
-            <StyledSelectionQuote>{selectionText}</StyledSelectionQuote>
-          </div>
-        ) : null}
-
-        <div>
-          <StyledLabel>
-            {mode === 'rewrite' ? 'How should it change?' : 'What to draft'}
-          </StyledLabel>
-          <TextAreaField
-            autoFocus
-            value={instruction}
-            disabled={generating}
-            placeholder={
-              mode === 'rewrite'
-                ? 'e.g. tighten this, make it warmer, add an example…'
-                : 'e.g. draft an opening paragraph about…'
-            }
-            onChange={event => setInstruction(event.target.value)}
-          />
-        </div>
-
-        <div>
-          <StyledLabel>Style</StyledLabel>
-          <WritingStyleManager
-            styles={styles}
-            selectedIds={selectedIds}
-            disabled={generating}
-            onChange={onStylesChange}
-            onSelectedChange={setSelectedIds}
-          />
-        </div>
-
-        {context?.trim() ? (
-          <StyledToggle>
-            <Checkbox
-              checked={useContext}
-              disabled={generating}
-              onChange={event => setUseContext(event.target.checked)}
-            />
-            Ground in this document (abstract, references…)
-          </StyledToggle>
-        ) : null}
-
-        {error ? <InlineBanner variant="danger">{error}</InlineBanner> : null}
-
-        <div>
-          <StyledLabel>Preview</StyledLabel>
-          {result ? (
-            <StyledPreview dangerouslySetInnerHTML={{ __html: result }} />
-          ) : (
-            <StyledPreviewEmpty>
-              {generating
-                ? 'Drafting…'
-                : 'Generate a draft to preview it here.'}
-            </StyledPreviewEmpty>
-          )}
-        </div>
-      </StyledBody>
-
-      <StyledActions>
-        <Button
-          type="button"
-          variant="subtle"
-          size="md"
-          disabled={generating}
-          onClick={onClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          type="button"
-          variant="primary"
-          size="md"
-          loading={generating}
-          disabled={generating}
-          onClick={() => void generate()}
-        >
-          {result ? 'Regenerate' : 'Generate'}
-        </Button>
-        <Button
-          type="button"
-          variant="primary"
-          size="md"
-          disabled={!result || generating}
-          onClick={() => onInsert(result)}
-        >
-          {mode === 'rewrite' ? 'Replace selection' : 'Insert'}
-        </Button>
-      </StyledActions>
-      </StyledShell>
-    </Modal>
-  )
-}
+import { Button } from '../components/common/buttons/Button.js'
+import { Checkbox } from '../components/common/inputs/Checkbox.js'
+import { InlineBanner } from '../components/common/feedback/InlineBanner.js'
+import { TextAreaField } from '../components/common/inputs/TextAreaField.js'
+import { Modal } from '../components/common/overlays/Modal.js'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+import { buildStyleGuidance, type WritingStyle } from './writingStyle.js'
+import { WritingStyleManager } from './WritingStyleManager.js'
+import { draftTextWithAgent, type DraftTextMode } from './draftTextWithAgent.js'
+
+//#region styled-components
+
+/** Full-page shell: a centered, readable column that fills the modal. */
+const StyledShell = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  max-width: 920px;
+  margin: 0 auto;
+  padding: var(--platform-spacing-lg);
+  box-sizing: border-box;
+  gap: var(--platform-spacing-md);
+`
+
+const StyledBody = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-md);
+`
+
+const StyledLabel = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+const StyledSelectionQuote = styled.blockquote`
+  margin: 0;
+  padding: 8px 12px;
+  border-left: 3px solid var(--platform-colors-border);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  max-height: 120px;
+  overflow: auto;
+`
+
+const StyledPreview = styled.div`
+  min-height: 200px;
+  max-height: min(64vh, 760px);
+  overflow: auto;
+  padding: var(--platform-spacing-md);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
+  line-height: 1.5;
+
+  h2 {
+    font-size: 1.1rem;
+    margin: 0.6em 0 0.2em;
+  }
+  p {
+    margin: 0 0 0.6em;
+  }
+`
+
+const StyledPreviewEmpty = styled.div`
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: center;
+`
+
+const StyledToggle = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--platform-typography-font-size-sm);
+  color: var(--platform-colors-text-primary);
+`
+
+const StyledActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--platform-spacing-sm);
+  margin-top: var(--platform-spacing-md);
+`
+
+//#endregion
+
+export interface DraftAssistantDialogProps {
+  open: boolean
+  mode: DraftTextMode
+  selectionText: string
+  /** The saved writing-style library (host owns persistence). */
+  styles: WritingStyle[]
+  /** Persist library edits (CRUD / distilled skills) made inside the dialog. */
+  onStylesChange: (styles: WritingStyle[]) => void
+  /**
+   * Optional grounding/reference material (e.g. a manuscript's abstract and
+   * references). Used for factual accuracy, not voice. When present, a "Ground
+   * in document" toggle appears so the author can include or omit it.
+   */
+  context?: string
+  onClose: () => void
+  onInsert: (html: string) => void
+}
+
+export function DraftAssistantDialog({
+  open,
+  mode,
+  selectionText,
+  styles,
+  onStylesChange,
+  context,
+  onClose,
+  onInsert,
+}: DraftAssistantDialogProps): React.ReactElement | null {
+  const [instruction, setInstruction] = useState('')
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [useContext, setUseContext] = useState(true)
+  const [generating, setGenerating] = useState(false)
+  const [result, setResult] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    setResult('')
+    setError(null)
+    setUseContext(true)
+  }, [open])
+
+  const selectedStyles = useMemo(
+    () => styles.filter(style => selectedIds.includes(style.id)),
+    [selectedIds, styles],
+  )
+
+  const generate = useCallback(async () => {
+    setGenerating(true)
+    setError(null)
+    try {
+      const styleGuidance = buildStyleGuidance(selectedStyles)
+      const html = await draftTextWithAgent({
+        mode,
+        instruction,
+        selectionText,
+        styleGuidance,
+        context: useContext ? context : undefined,
+      })
+      if (!html) {
+        setError('The model did not return anything. Try again.')
+        return
+      }
+      setResult(html)
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setGenerating(false)
+    }
+  }, [context, instruction, mode, selectedStyles, selectionText, useContext])
+
+  if (!open) return null
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={mode === 'rewrite' ? 'Redraft selection' : 'Draft with AI'}
+      size="fullscreen"
+      chrome
+      closeOnBackdropClick={!generating}
+    >
+      <StyledShell>
+      <StyledBody>
+        {mode === 'rewrite' && selectionText ? (
+          <div>
+            <StyledLabel>Selected</StyledLabel>
+            <StyledSelectionQuote>{selectionText}</StyledSelectionQuote>
+          </div>
+        ) : null}
+
+        <div>
+          <StyledLabel>
+            {mode === 'rewrite' ? 'How should it change?' : 'What to draft'}
+          </StyledLabel>
+          <TextAreaField
+            autoFocus
+            value={instruction}
+            disabled={generating}
+            placeholder={
+              mode === 'rewrite'
+                ? 'e.g. tighten this, make it warmer, add an example…'
+                : 'e.g. draft an opening paragraph about…'
+            }
+            onChange={event => setInstruction(event.target.value)}
+          />
+        </div>
+
+        <div>
+          <StyledLabel>Style</StyledLabel>
+          <WritingStyleManager
+            styles={styles}
+            selectedIds={selectedIds}
+            disabled={generating}
+            onChange={onStylesChange}
+            onSelectedChange={setSelectedIds}
+          />
+        </div>
+
+        {context?.trim() ? (
+          <StyledToggle>
+            <Checkbox
+              checked={useContext}
+              disabled={generating}
+              onChange={event => setUseContext(event.target.checked)}
+            />
+            Ground in this document (abstract, references…)
+          </StyledToggle>
+        ) : null}
+
+        {error ? <InlineBanner variant="danger">{error}</InlineBanner> : null}
+
+        <div>
+          <StyledLabel>Preview</StyledLabel>
+          {result ? (
+            <StyledPreview dangerouslySetInnerHTML={{ __html: result }} />
+          ) : (
+            <StyledPreviewEmpty>
+              {generating
+                ? 'Drafting…'
+                : 'Generate a draft to preview it here.'}
+            </StyledPreviewEmpty>
+          )}
+        </div>
+      </StyledBody>
+
+      <StyledActions>
+        <Button
+          type="button"
+          variant="subtle"
+          size="md"
+          disabled={generating}
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="primary"
+          size="md"
+          loading={generating}
+          disabled={generating}
+          onClick={() => void generate()}
+        >
+          {result ? 'Regenerate' : 'Generate'}
+        </Button>
+        <Button
+          type="button"
+          variant="primary"
+          size="md"
+          disabled={!result || generating}
+          onClick={() => onInsert(result)}
+        >
+          {mode === 'rewrite' ? 'Replace selection' : 'Insert'}
+        </Button>
+      </StyledActions>
+      </StyledShell>
+    </Modal>
+  )
+}