@semiont/react-ui 0.2.45 → 0.3.0

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import React, { useState } from 'react';
+import type { GatheredContext } from '@semiont/core';
+import { LOCALES } from '@semiont/api-client';
+
+export interface GenerationConfig {
+  title: string;
+  prompt?: string;
+  language: string;
+  temperature: number;
+  maxTokens: number;
+  context: GatheredContext;
+}
+
+export interface ConfigureGenerationStepProps {
+  defaultTitle: string;
+  locale: string;
+  context: GatheredContext;
+  onBack: () => void;
+  onCancel: () => void;
+  onGenerate: (config: GenerationConfig) => void;
+  translations: {
+    resourceTitle: string;
+    resourceTitlePlaceholder: string;
+    additionalInstructions: string;
+    additionalInstructionsPlaceholder: string;
+    language: string;
+    languageHelp: string;
+    creativity: string;
+    creativityFocused: string;
+    creativityCreative: string;
+    maxLength: string;
+    maxLengthHelp: string;
+    cancel: string;
+    back: string;
+    generate: string;
+  };
+}
+
+export function ConfigureGenerationStep({
+  defaultTitle,
+  locale,
+  context,
+  onBack,
+  onCancel,
+  onGenerate,
+  translations: t,
+}: ConfigureGenerationStepProps) {
+  const [title, setTitle] = useState(defaultTitle);
+  const [prompt, setPrompt] = useState('');
+  const [language, setLanguage] = useState(locale);
+  const [temperature, setTemperature] = useState(0.7);
+  const [maxTokens, setMaxTokens] = useState(500);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmedPrompt = prompt.trim();
+    onGenerate({
+      title,
+      ...(trimmedPrompt ? { prompt: trimmedPrompt } : {}),
+      language,
+      temperature,
+      maxTokens,
+      context,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="semiont-form">
+      {/* Resource Title */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-title" className="semiont-form__label">
+          {t.resourceTitle}
+        </label>
+        <input
+          id="wizard-title"
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+          className="semiont-input"
+          placeholder={t.resourceTitlePlaceholder}
+        />
+      </div>
+
+      {/* Additional Instructions */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-prompt" className="semiont-form__label">
+          {t.additionalInstructions}
+        </label>
+        <textarea
+          id="wizard-prompt"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          rows={3}
+          className="semiont-textarea"
+          placeholder={t.additionalInstructionsPlaceholder}
+        />
+      </div>
+
+      {/* Language Selection */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-language" className="semiont-form__label">
+          {t.language}
+        </label>
+        <select
+          id="wizard-language"
+          value={language}
+          onChange={(e) => setLanguage(e.target.value)}
+          className="semiont-select"
+        >
+          {LOCALES.map((lang) => (
+            <option key={lang.code} value={lang.code}>
+              {lang.nativeName}
+            </option>
+          ))}
+        </select>
+        <p className="semiont-form__help">
+          {t.languageHelp}
+        </p>
+      </div>
+
+      {/* Temperature Slider */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-temperature" className="semiont-form__label">
+          {t.creativity} ({temperature.toFixed(1)})
+        </label>
+        <input
+          id="wizard-temperature"
+          type="range"
+          min="0"
+          max="1"
+          step="0.1"
+          value={temperature}
+          onChange={(e) => setTemperature(parseFloat(e.target.value))}
+          className="semiont-slider"
+        />
+        <div className="semiont-slider__labels">
+          <span>{t.creativityFocused}</span>
+          <span>{t.creativityCreative}</span>
+        </div>
+      </div>
+
+      {/* Max Tokens Input */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-maxTokens" className="semiont-form__label">
+          {t.maxLength}
+        </label>
+        <input
+          id="wizard-maxTokens"
+          type="number"
+          min="100"
+          max="4000"
+          step="100"
+          value={maxTokens}
+          onChange={(e) => setMaxTokens(parseInt(e.target.value))}
+          className="semiont-input"
+        />
+        <p className="semiont-form__help">
+          {t.maxLengthHelp}
+        </p>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="semiont-button--secondary semiont-button--flex"
+        >
+          ✕ {t.cancel}
+        </button>
+        <button
+          type="button"
+          onClick={onBack}
+          className="semiont-button--secondary semiont-button--flex"
+        >
+          ◀ {t.back}
+        </button>
+        <button
+          type="submit"
+          className="semiont-button--primary semiont-button--flex"
+        >
+          ✨ {t.generate}
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/components/modals/ConfigureSearchStep.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+
+export interface SearchConfig {
+  limit: number;
+  useSemanticScoring: boolean;
+}
+
+export interface ConfigureSearchStepProps {
+  isSearching?: boolean;
+  onBack: () => void;
+  onCancel: () => void;
+  onSearch: (config: SearchConfig) => void;
+  translations: {
+    maxResults: string;
+    semanticScoring: string;
+    semanticScoringHelp: string;
+    cancel: string;
+    back: string;
+    search: string;
+    searching: string;
+  };
+}
+
+export function ConfigureSearchStep({
+  isSearching = false,
+  onBack,
+  onCancel,
+  onSearch,
+  translations: t,
+}: ConfigureSearchStepProps) {
+  const [limit, setLimit] = useState(10);
+  const [useSemanticScoring, setUseSemanticScoring] = useState(true);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSearch({ limit, useSemanticScoring });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="semiont-form">
+      {/* Max Results */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-limit" className="semiont-form__label">
+          {t.maxResults}
+        </label>
+        <select
+          id="wizard-limit"
+          value={limit}
+          onChange={(e) => setLimit(parseInt(e.target.value))}
+          className="semiont-select"
+        >
+          <option value={1}>1</option>
+          <option value={5}>5</option>
+          <option value={10}>10</option>
+          <option value={20}>20</option>
+        </select>
+      </div>
+
+      {/* Semantic Scoring Toggle */}
+      <div className="semiont-form__field">
+        <label className="semiont-form__label" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <input
+            type="checkbox"
+            checked={useSemanticScoring}
+            onChange={(e) => setUseSemanticScoring(e.target.checked)}
+          />
+          {t.semanticScoring}
+        </label>
+        <p className="semiont-form__help">
+          {t.semanticScoringHelp}
+        </p>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="semiont-button--secondary semiont-button--flex"
+          disabled={isSearching}
+        >
+          ✕ {t.cancel}
+        </button>
+        <button
+          type="button"
+          onClick={onBack}
+          className="semiont-button--secondary semiont-button--flex"
+          disabled={isSearching}
+        >
+          ◀ {t.back}
+        </button>
+        <button
+          type="submit"
+          className="semiont-button--primary semiont-button--flex"
+          disabled={isSearching}
+          data-generating={isSearching ? 'true' : 'false'}
+        >
+          {isSearching ? `✨ ${t.searching}` : `🔍 ${t.search}`}
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/components/modals/ContextSummary.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import type { GatheredContext } from '@semiont/core';
+
+export interface ContextSummaryTranslations {
+  annotationLabel: string;
+  sourceResourceLabel: string;
+  motivationLabel: string;
+  sourceContextLabel: string;
+  entityTypesLabel: string;
+  graphContextLabel: string;
+  connectionsLabel: string;
+  citedByLabel: string;
+  siblingTypesLabel: string;
+}
+
+export interface ContextSummaryProps {
+  context: GatheredContext;
+  translations: ContextSummaryTranslations;
+}
+
+export function ContextSummary({ context, translations: t }: ContextSummaryProps) {
+  const annotation = context.annotation;
+  const sourceResource = context.sourceResource;
+  const sourceContext = context.sourceContext;
+  const graphContext = context.graphContext;
+  const entityTypes = context.metadata?.entityTypes ?? [];
+  const connections = graphContext?.connections ?? [];
+  const citedBy = graphContext?.citedBy ?? [];
+  const citedByCount = graphContext?.citedByCount ?? 0;
+  const siblingEntityTypes = graphContext?.siblingEntityTypes ?? [];
+
+  return (
+    <>
+      {/* Annotation & Source Resource */}
+      <div className="semiont-form__field">
+        <label className="semiont-form__label">
+          {t.annotationLabel}
+        </label>
+        <div style={{
+          padding: '0.5rem 0.75rem',
+          backgroundColor: 'var(--semiont-bg-secondary)',
+          borderRadius: 'var(--semiont-radius-md)',
+          border: '1px solid var(--semiont-border-primary)',
+          fontSize: 'var(--semiont-text-sm)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.25rem',
+        }}>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <span style={{ fontWeight: 500, color: 'var(--semiont-text-secondary)' }}>{t.motivationLabel}:</span>
+            <span className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.5rem' }}>
+              {annotation.motivation}
+            </span>
+          </div>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <span style={{ fontWeight: 500, color: 'var(--semiont-text-secondary)' }}>{t.sourceResourceLabel}:</span>
+            <span style={{ color: 'var(--semiont-text-primary)' }}>{sourceResource.name}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Source Context Preview */}
+      {sourceContext && (
+        <div className="semiont-form__field">
+          <label className="semiont-form__label">
+            {t.sourceContextLabel}
+          </label>
+          <div style={{
+            padding: '0.75rem',
+            backgroundColor: 'var(--semiont-bg-secondary)',
+            borderRadius: 'var(--semiont-radius-md)',
+            border: '1px solid var(--semiont-border-primary)',
+            maxHeight: '200px',
+            overflowY: 'auto',
+          }}>
+            <div style={{ fontSize: 'var(--semiont-text-sm)', fontFamily: 'monospace', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
+              {sourceContext.before && <span>{sourceContext.before}</span>}
+              <span style={{
+                backgroundColor: 'var(--semiont-color-primary-100)',
+                padding: '0 0.25rem',
+                fontWeight: 600,
+                color: 'var(--semiont-color-primary-900)',
+              }}>
+                {sourceContext.selected}
+              </span>
+              {sourceContext.after && <span>{sourceContext.after}</span>}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Entity Types */}
+      {entityTypes.length > 0 && (
+        <div className="semiont-form__field">
+          <label className="semiont-form__label">
+            {t.entityTypesLabel}
+          </label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}>
+            {entityTypes.map(et => (
+              <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.5rem' }}>
+                {et}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Graph Context */}
+      {graphContext && (connections.length > 0 || citedByCount > 0 || siblingEntityTypes.length > 0) && (
+        <div className="semiont-form__field">
+          <label className="semiont-form__label">
+            {t.graphContextLabel}
+          </label>
+          <div style={{
+            padding: '0.75rem',
+            backgroundColor: 'var(--semiont-bg-secondary)',
+            borderRadius: 'var(--semiont-radius-md)',
+            border: '1px solid var(--semiont-border-primary)',
+            fontSize: 'var(--semiont-text-sm)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem',
+          }}>
+            {/* Connections */}
+            {connections.length > 0 && (
+              <div>
+                <span style={{ fontWeight: 500, color: 'var(--semiont-text-secondary)' }}>{t.connectionsLabel}</span>
+                <ul style={{ marginTop: '0.25rem', display: 'flex', flexDirection: 'column', gap: '0.125rem', listStyle: 'none', padding: 0 }}>
+                  {connections.map(conn => (
+                    <li key={conn.resourceId} style={{ color: 'var(--semiont-text-secondary)', display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+                      <span>{conn.resourceName}</span>
+                      {conn.bidirectional && (
+                        <span className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem' }}>mutual</span>
+                      )}
+                      {conn.entityTypes && conn.entityTypes.length > 0 && (
+                        <span style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-tertiary)' }}>
+                          {conn.entityTypes.join(', ')}
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {/* Cited By */}
+            {citedByCount > 0 && (
+              <div>
+                <span style={{ fontWeight: 500, color: 'var(--semiont-text-secondary)' }}>
+                  {t.citedByLabel} ({citedByCount})
+                </span>
+                {citedBy.length > 0 && (
+                  <ul style={{ marginTop: '0.25rem', display: 'flex', flexDirection: 'column', gap: '0.125rem', listStyle: 'none', padding: 0 }}>
+                    {citedBy.map(ref => (
+                      <li key={ref.resourceId} style={{ color: 'var(--semiont-text-secondary)' }}>
+                        {ref.resourceName}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )}
+
+            {/* Sibling Entity Types */}
+            {siblingEntityTypes.length > 0 && (
+              <div>
+                <span style={{ fontWeight: 500, color: 'var(--semiont-text-secondary)' }}>{t.siblingTypesLabel}</span>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem', marginTop: '0.25rem' }}>
+                  {siblingEntityTypes.map(et => (
+                    <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.5rem' }}>
+                      {et}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/modals/GatherContextStep.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import type { GatheredContext } from '@semiont/core';
+import { ContextSummary } from './ContextSummary';
+import type { ContextSummaryTranslations } from './ContextSummary';
+
+export interface GatherContextStepProps {
+  context: GatheredContext | null;
+  contextLoading: boolean;
+  contextError: Error | null;
+  onCancel: () => void;
+  onBind: () => void;
+  onGenerate: () => void;
+  onCompose: () => void;
+  translations: {
+    title: string;
+    loadingContext: string;
+    failedContext: string;
+    cancel: string;
+    search: string;
+    generate: string;
+    compose: string;
+  } & ContextSummaryTranslations;
+}
+
+export function GatherContextStep({
+  context,
+  contextLoading,
+  contextError,
+  onCancel,
+  onBind,
+  onGenerate,
+  onCompose,
+  translations: t,
+}: GatherContextStepProps) {
+  const contextReady = !contextLoading && !contextError && !!context;
+
+  return (
+    <>
+      {contextLoading && (
+        <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '1rem 0' }}>
+          {t.loadingContext}
+        </div>
+      )}
+      {!!contextError && (
+        <div style={{ textAlign: 'center', padding: '1rem 0', color: 'var(--semiont-color-red-600)' }}>
+          {t.failedContext}
+        </div>
+      )}
+
+      {context && <ContextSummary context={context} translations={t} />}
+
+      {/* Action Buttons */}
+      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="semiont-button--secondary semiont-button--flex"
+        >
+          ✕ {t.cancel}
+        </button>
+        <button
+          type="button"
+          onClick={onBind}
+          disabled={!contextReady}
+          className="semiont-button--primary semiont-button--flex"
+        >
+          🔍 {t.search}…
+        </button>
+        <button
+          type="button"
+          onClick={onGenerate}
+          disabled={!contextReady}
+          className="semiont-button--primary semiont-button--flex"
+        >
+          ✨ {t.generate}…
+        </button>
+        <button
+          type="button"
+          onClick={onCompose}
+          disabled={!contextReady}
+          className="semiont-button--secondary semiont-button--flex"
+        >
+          ✍️ {t.compose}
+        </button>
+      </div>
+    </>
+  );
+}

package/src/components/modals/KeyboardShortcutsHelpModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import './modals.css';
@@ -91,12 +91,11 @@ export function KeyboardShortcutsHelpModal({ isOpen, onClose }: KeyboardShortcut
   const isMac = typeof window !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 
   return (
-    <Transition appear show={isOpen} as={Fragment}>
+    <Transition appear show={isOpen}>
       <Dialog as="div" className="semiont-modal" onClose={onClose}>
         {/* Backdrop */}
         <TransitionChild
-          as={Fragment}
-          enter="ease-out duration-200"
+                   enter="ease-out duration-200"
           enterFrom="opacity-0"
           enterTo="opacity-100"
           leave="ease-in duration-150"
@@ -110,8 +109,7 @@ export function KeyboardShortcutsHelpModal({ isOpen, onClose }: KeyboardShortcut
         <div className="semiont-modal__container">
           <div className="semiont-modal__wrapper">
             <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-200"
+                           enter="ease-out duration-200"
               enterFrom="opacity-0 scale-95"
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-150"

package/src/components/modals/ProposeEntitiesModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, Fragment } from 'react';
+import { useEffect, useState } from 'react';
 import { Dialog, DialogPanel, DialogTitle, DialogDescription, Transition, TransitionChild } from '@headlessui/react';
 import { useEntityTypes } from '../../lib/api-hooks';
 
@@ -68,12 +68,11 @@ export function ProposeEntitiesModal({
   };
 
   return (
-    <Transition appear show={isOpen} as={Fragment}>
+    <Transition appear show={isOpen}>
       <Dialog as="div" className="semiont-modal" onClose={onCancel}>
         {/* Backdrop */}
         <TransitionChild
-          as={Fragment}
-          enter="ease-out duration-200"
+                   enter="ease-out duration-200"
           enterFrom="opacity-0"
           enterTo="opacity-100"
           leave="ease-in duration-150"
@@ -87,8 +86,7 @@ export function ProposeEntitiesModal({
         <div className="semiont-modal__container">
           <div className="semiont-modal__wrapper">
             <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-200"
+                           enter="ease-out duration-200"
               enterFrom="opacity-0 scale-95"
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-150"