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

package/src/writing/DraftAssistantDialog.tsx

@@ -0,0 +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>
+  )
+}

package/src/writing/WritingStyleManager.tsx

@@ -0,0 +1,416 @@
+import { Button } from '../components/common/buttons/Button.js'
+import { QuietDisclosure } from '../components/common/containers/QuietDisclosure.js'
+import { Checkbox } from '../components/common/inputs/Checkbox.js'
+import { TextAreaField } from '../components/common/inputs/TextAreaField.js'
+import { TextField } from '../components/common/inputs/TextField.js'
+import { useCallback, useState } from 'react'
+import { styled } from 'styled-components'
+import { condenseWritingStyleWithAgent } from './condenseWritingStyle.js'
+import {
+  createStyleSource,
+  createWritingStyle,
+  styleHasContent,
+  styleRawGuidance,
+  type StyleSource,
+  type WritingStyle,
+} from './writingStyle.js'
+
+//#region styled-components
+
+const StyledRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledHint = styled.p`
+  margin: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.4;
+`
+
+const StyledChips = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`
+
+const StyledEmpty = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const StyledCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  padding: var(--platform-spacing-sm) 0;
+  border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.6);
+`
+
+const StyledRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledSourceText = styled(TextAreaField)`
+  min-height: 72px;
+`
+
+const StyledSkillText = styled(TextAreaField)`
+  min-height: 72px;
+`
+
+const StyledSubLabel = 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 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 StyledError = styled.span`
+  color: var(--platform-colors-danger-text, var(--platform-colors-danger));
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const StyledSpacer = styled.div`
+  flex: 1;
+`
+
+//#endregion
+
+export interface WritingStyleManagerProps {
+  styles: WritingStyle[]
+  selectedIds: string[]
+  disabled?: boolean
+  onChange: (next: WritingStyle[]) => void
+  onSelectedChange: (ids: string[]) => void
+}
+
+export function WritingStyleManager({
+  styles,
+  selectedIds,
+  disabled = false,
+  onChange,
+  onSelectedChange,
+}: WritingStyleManagerProps): React.ReactElement {
+  const [distilling, setDistilling] = useState<Record<string, boolean>>({})
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const patchStyle = useCallback(
+    (id: string, patch: Partial<WritingStyle>) =>
+      onChange(
+        styles.map(style => (style.id === id ? { ...style, ...patch } : style)),
+      ),
+    [onChange, styles],
+  )
+
+  const patchSource = useCallback(
+    (styleId: string, sourceId: string, patch: Partial<StyleSource>) =>
+      onChange(
+        styles.map(style =>
+          style.id === styleId
+            ? {
+                ...style,
+                sources: style.sources.map(source =>
+                  source.id === sourceId ? { ...source, ...patch } : source,
+                ),
+              }
+            : style,
+        ),
+      ),
+    [onChange, styles],
+  )
+
+  const addStyle = useCallback(() => {
+    const style = createWritingStyle(`Style ${styles.length + 1}`)
+    onChange([...styles, style])
+    onSelectedChange([...selectedIds, style.id])
+  }, [onChange, onSelectedChange, selectedIds, styles])
+
+  const removeStyle = useCallback(
+    (id: string) => {
+      onChange(styles.filter(style => style.id !== id))
+      onSelectedChange(selectedIds.filter(entry => entry !== id))
+    },
+    [onChange, onSelectedChange, selectedIds, styles],
+  )
+
+  const addSource = useCallback(
+    (styleId: string) => {
+      const style = styles.find(entry => entry.id === styleId)
+      if (!style) return
+      patchStyle(styleId, {
+        sources: [
+          ...style.sources,
+          createStyleSource(`Sample ${style.sources.length + 1}`),
+        ],
+      })
+    },
+    [patchStyle, styles],
+  )
+
+  const removeSource = useCallback(
+    (styleId: string, sourceId: string) => {
+      const style = styles.find(entry => entry.id === styleId)
+      if (!style) return
+      patchStyle(styleId, {
+        sources: style.sources.filter(source => source.id !== sourceId),
+      })
+    },
+    [patchStyle, styles],
+  )
+
+  const toggleSelected = useCallback(
+    (id: string) =>
+      onSelectedChange(
+        selectedIds.includes(id)
+          ? selectedIds.filter(entry => entry !== id)
+          : [...selectedIds, id],
+      ),
+    [onSelectedChange, selectedIds],
+  )
+
+  const distill = useCallback(
+    async (style: WritingStyle) => {
+      const raw = styleRawGuidance(style)
+      if (!raw.trim()) {
+        setErrors(current => ({
+          ...current,
+          [style.id]: 'Add a writing sample or some notes first.',
+        }))
+        return
+      }
+      setErrors(current => ({ ...current, [style.id]: '' }))
+      setDistilling(current => ({ ...current, [style.id]: true }))
+      try {
+        const skill = await condenseWritingStyleWithAgent(raw)
+        patchStyle(style.id, { skill, skillEnabled: true })
+      } catch (cause) {
+        setErrors(current => ({
+          ...current,
+          [style.id]:
+            cause instanceof Error ? cause.message : 'Could not distill the style.',
+        }))
+      } finally {
+        setDistilling(current => ({ ...current, [style.id]: false }))
+      }
+    },
+    [patchStyle],
+  )
+
+  return (
+    <StyledRoot>
+      <StyledHint>
+        Your own named styles guide the agent’s voice — never the book’s content.
+        Pick which apply to this draft. Saved across books; manage them below.
+      </StyledHint>
+
+      <StyledChips>
+        {styles.length === 0 ? (
+          <StyledEmpty>No styles yet — add one below.</StyledEmpty>
+        ) : (
+          styles.map(style => (
+            <Button
+              key={style.id}
+              type="button"
+              variant="text"
+              size="sm"
+              selected={selectedIds.includes(style.id)}
+              disabled={disabled || !styleHasContent(style)}
+              title={
+                style.skillEnabled && style.skill.trim()
+                  ? 'Applies the distilled skill'
+                  : 'Applies your samples and notes'
+              }
+              onClick={() => toggleSelected(style.id)}
+            >
+              {style.name}
+              {style.skillEnabled && style.skill.trim() ? ' · skill' : ''}
+            </Button>
+          ))
+        )}
+      </StyledChips>
+
+      <QuietDisclosure summary="Manage styles">
+        {styles.map(style => {
+          const busy = distilling[style.id] === true
+          const error = errors[style.id]
+          return (
+            <StyledCard key={style.id}>
+              <StyledRow>
+                <TextField
+                  value={style.name}
+                  disabled={disabled}
+                  placeholder="Style name (e.g. Documentation, Fiction)"
+                  aria-label="Style name"
+                  onChange={event =>
+                    patchStyle(style.id, { name: event.target.value })
+                  }
+                />
+                <Button
+                  type="button"
+                  variant="text"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={() => removeStyle(style.id)}
+                >
+                  Remove
+                </Button>
+              </StyledRow>
+
+              <StyledSubLabel>Sources (your writing samples)</StyledSubLabel>
+              {style.sources.map(source => (
+                <div key={source.id}>
+                  <StyledRow>
+                    <TextField
+                      value={source.label}
+                      disabled={disabled}
+                      placeholder="Label (e.g. my essays)"
+                      aria-label="Sample label"
+                      onChange={event =>
+                        patchSource(style.id, source.id, {
+                          label: event.target.value,
+                        })
+                      }
+                    />
+                    <Button
+                      type="button"
+                      variant="text"
+                      size="sm"
+                      disabled={disabled}
+                      onClick={() => removeSource(style.id, source.id)}
+                    >
+                      Remove
+                    </Button>
+                  </StyledRow>
+                  <StyledSourceText
+                    value={source.text}
+                    disabled={disabled}
+                    placeholder="Paste a paragraph or two written in your voice…"
+                    aria-label="Sample text"
+                    onChange={event =>
+                      patchSource(style.id, source.id, {
+                        text: event.target.value,
+                      })
+                    }
+                  />
+                </div>
+              ))}
+              <StyledRow>
+                <Button
+                  type="button"
+                  variant="subtle"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={() => addSource(style.id)}
+                >
+                  Add sample
+                </Button>
+              </StyledRow>
+
+              <StyledSubLabel>Notes (your own rules)</StyledSubLabel>
+              <TextAreaField
+                value={style.notes}
+                disabled={disabled}
+                placeholder="e.g. short sentences, active voice, no jargon, warm but precise…"
+                aria-label="Style notes"
+                onChange={event =>
+                  patchStyle(style.id, { notes: event.target.value })
+                }
+              />
+
+              <StyledSubLabel>Prefer words (whitelist)</StyledSubLabel>
+              <TextField
+                value={style.include}
+                disabled={disabled}
+                placeholder="Words/phrases to favour, comma-separated"
+                aria-label="Words to prefer"
+                onChange={event =>
+                  patchStyle(style.id, { include: event.target.value })
+                }
+              />
+
+              <StyledSubLabel>Avoid words (blacklist)</StyledSubLabel>
+              <TextField
+                value={style.exclude}
+                disabled={disabled}
+                placeholder="Words/phrases to avoid, comma-separated"
+                aria-label="Words to avoid"
+                onChange={event =>
+                  patchStyle(style.id, { exclude: event.target.value })
+                }
+              />
+
+              <StyledRow>
+                <Button
+                  type="button"
+                  variant="primary"
+                  size="sm"
+                  loading={busy}
+                  disabled={disabled || busy}
+                  onClick={() => void distill(style)}
+                >
+                  {style.skill.trim()
+                    ? 'Re-distill into skill'
+                    : 'Distill into skill'}
+                </Button>
+                {style.skill.trim() ? (
+                  <StyledToggle>
+                    <Checkbox
+                      checked={style.skillEnabled}
+                      disabled={disabled}
+                      onChange={event =>
+                        patchStyle(style.id, {
+                          skillEnabled: event.target.checked,
+                        })
+                      }
+                    />
+                    Use skill
+                  </StyledToggle>
+                ) : null}
+                <StyledSpacer />
+                {error ? <StyledError>{error}</StyledError> : null}
+              </StyledRow>
+              {style.skill.trim() ? (
+                <>
+                  <StyledSubLabel>Skill (distilled — editable)</StyledSubLabel>
+                  <StyledSkillText
+                    value={style.skill}
+                    disabled={disabled}
+                    aria-label="Distilled style skill"
+                    onChange={event =>
+                      patchStyle(style.id, { skill: event.target.value })
+                    }
+                  />
+                </>
+              ) : null}
+            </StyledCard>
+          )
+        })}
+        <StyledCard>
+          <Button
+            type="button"
+            variant="subtle"
+            size="sm"
+            disabled={disabled}
+            onClick={addStyle}
+          >
+            Add style
+          </Button>
+        </StyledCard>
+      </QuietDisclosure>
+    </StyledRoot>
+  )
+}