@autobusal/common 1.28.0 → 1.30.0

package/AiAssist/AiFieldAssist.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useAiAvailable } from './services';
+import AiReviewModal from './AiReviewModal';
+import { Trigger } from './styles';
+
+interface Props {
+  /** The field's own current value - the base text for "Improve". */
+  text?: string
+  /** The English source text, for a "Translate from EN" trigger. */
+  sourceText?: string
+  /** This field's locale, e.g. "sq" - required for the translate trigger. */
+  targetLocale?: string
+  onInsert: (content: string) => void
+  t: TFunction<'common'>
+}
+
+/**
+ * Sits next to one content field (a 'component'-type Viewer row - see
+ * Data.tsx's render-prop support for that type) and renders nothing at all
+ * when no AI provider is enabled for this label, which is the whole
+ * visibility gate the plan calls for - no separate flag to keep in sync.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-08
+ */
+const AiFieldAssist = ({ text, sourceText, targetLocale, onInsert, t }: Props): JSX.Element | null => {
+  const { data: available } = useAiAvailable();
+
+  const [ mode, setMode ] = useState<'generate' | 'improve' | 'translate' | null>(null);
+
+  if (!available || Object.keys(available).length === 0) {
+    return null;
+  }
+
+  const hasText = (text ?? '').trim() !== '';
+  const canTranslate = (sourceText ?? '').trim() !== '' && !!targetLocale;
+
+  return (
+    <>
+      <Trigger>
+        <button type="button" onClick={ () => setMode('generate') }>
+          { t('ai_assist.trigger.generate') }
+        </button>
+
+        { hasText && (
+          <button type="button" onClick={ () => setMode('improve') }>
+            { t('ai_assist.trigger.improve') }
+          </button>
+        ) }
+
+        { canTranslate && (
+          <button type="button" onClick={ () => setMode('translate') }>
+            { t('ai_assist.trigger.translate') }
+          </button>
+        ) }
+      </Trigger>
+
+      { mode && (
+        <AiReviewModal
+          mode={ mode }
+          text={ mode === 'translate' ? sourceText : text }
+          targetLocale={ targetLocale }
+          onInsert={ onInsert }
+          onClose={ () => setMode(null) }
+          t={ t }
+        />
+      ) }
+    </>
+  );
+};
+
+export default AiFieldAssist;

package/AiAssist/AiReviewModal.tsx

@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import Modal from '../Modal/Modal';
+import { useAiAvailable, useAiGenerate, useAiTranslate, useAiImprove } from './services';
+import { Row, Field, Compare, Pane, Draft, Actions, Error } from './styles';
+
+interface Props {
+  mode: 'generate' | 'improve' | 'translate'
+  text?: string
+  targetLocale?: string
+  sourceLocale?: string
+  onInsert: (content: string) => void
+  onClose: () => void
+  t: TFunction<'common'>
+}
+
+/**
+ * The one AI-review surface every content admin form shares - a draft
+ * NEVER lands in a field on its own. It renders in here first, the admin
+ * can hand-edit it or ask for a revision (which re-runs improve() with the
+ * CURRENT draft as the base text, regardless of what mode this opened in),
+ * and only an explicit Insert writes it back to the caller's field. Cancel
+ * discards everything; the form's own Save is a separate, second step.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-08
+ */
+const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClose, t }: Props): JSX.Element => {
+  const { data: available, isLoading: loadingAvailable } = useAiAvailable();
+
+  const providers = Object.keys(available ?? {});
+
+  const [ provider, setProvider ] = useState<string>('');
+  const [ model, setModel ] = useState<string>('');
+  const [ instruction, setInstruction ] = useState<string>('');
+  const [ draft, setDraft ] = useState<string | null>(null);
+  const [ error, setError ] = useState<string | null>(null);
+
+  const activeProvider = provider || providers[0] || '';
+  const activeModel = model || available?.[activeProvider]?.default_model || '';
+
+  const { mutate: Generate, isPending: generating } = useAiGenerate();
+  const { mutate: Translate, isPending: translating } = useAiTranslate();
+  const { mutate: Improve, isPending: improving } = useAiImprove();
+
+  const running = generating || translating || improving;
+
+  const onRun = (): void => {
+    setError(null);
+
+    const onError = (err: Error): void => setError(err.message);
+    const onSuccess = (result: { content: string }): void => {
+      setDraft(result.content);
+      setInstruction('');
+    };
+
+    // Once a draft exists, EVERY run (regardless of the mode this modal
+    // opened in) is a revision on that draft - improve() is the one
+    // endpoint that takes existing text + an instruction, which is exactly
+    // what a revision is.
+    if (draft !== null) {
+      Improve({ provider: activeProvider, model: activeModel, text: draft, instruction }, { onSuccess, onError });
+
+      return;
+    }
+
+    if (mode === 'generate') {
+      Generate({ provider: activeProvider, model: activeModel, prompt: instruction }, { onSuccess, onError });
+
+      return;
+    }
+
+    if (mode === 'translate') {
+      Translate({
+        provider: activeProvider,
+        model: activeModel,
+        text: text ?? '',
+        target_locale: targetLocale ?? '',
+        source_locale: sourceLocale
+      }, { onSuccess, onError });
+
+      return;
+    }
+
+    Improve({ provider: activeProvider, model: activeModel, text: text ?? '', instruction }, { onSuccess, onError });
+  };
+
+  const onInsertClick = (): void => {
+    if (draft !== null) {
+      onInsert(draft);
+    }
+
+    onClose();
+  };
+
+  const content = (
+    <>
+      { error && <Error>{ error }</Error> }
+
+      <Row>
+        <Field>
+          { t('ai_assist.provider') }
+
+          <select value={ activeProvider } onChange={ event => { setProvider(event.target.value); setModel(''); } }>
+            { providers.map(key => <option key={ key } value={ key }>{ key }</option>) }
+          </select>
+        </Field>
+
+        <Field>
+          { t('ai_assist.model') }
+
+          <select value={ activeModel } onChange={ event => setModel(event.target.value) }>
+            { (available?.[activeProvider]?.models ?? []).map(name => <option key={ name } value={ name }>{ name }</option>) }
+          </select>
+        </Field>
+      </Row>
+
+      { mode !== 'translate' && (
+        <Row>
+          <Field>
+            { draft !== null
+              ? t('ai_assist.revise_instruction')
+              : (mode === 'generate' ? t('ai_assist.generate_prompt') : t('ai_assist.improve_instruction')) }
+
+            <input
+              type="text"
+              value={ instruction }
+              onChange={ event => setInstruction(event.target.value) }
+              placeholder={ draft !== null ? t('ai_assist.revise_placeholder') : undefined }
+            />
+          </Field>
+        </Row>
+      ) }
+
+      { draft === null && mode === 'translate' && (
+        <Pane>
+          <h4>{ t('ai_assist.source') }</h4>
+
+          <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+        </Pane>
+      ) }
+
+      { draft !== null && mode === 'translate' && (
+        <Compare>
+          <Pane>
+            <h4>{ t('ai_assist.source') }</h4>
+
+            <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+          </Pane>
+
+          <Pane>
+            <h4>{ t('ai_assist.draft') }</h4>
+
+            <div dangerouslySetInnerHTML={ { __html: draft } } />
+          </Pane>
+        </Compare>
+      ) }
+
+      { draft !== null && (
+        <Draft value={ draft } onChange={ event => setDraft(event.target.value) } />
+      ) }
+
+      <Actions>
+        <button type="button" onClick={ onClose } disabled={ running }>
+          { t('ai_assist.cancel') }
+        </button>
+
+        <button type="button" onClick={ onRun } disabled={ running || !activeProvider || (mode !== 'translate' && draft === null && instruction.trim() === '') }>
+          { draft !== null ? t('ai_assist.revise') : t('ai_assist.run') }
+        </button>
+
+        { draft !== null && (
+          <button type="button" onClick={ onInsertClick } disabled={ running }>
+            { t('ai_assist.insert') }
+          </button>
+        ) }
+      </Actions>
+    </>
+  );
+
+  return (
+    <Modal
+      loading={ loadingAvailable }
+      width={ 720 }
+      title={ t(`ai_assist.title.${ mode }`) }
+      content={ content }
+      onClose={ onClose }
+    />
+  );
+};
+
+export default AiReviewModal;

package/AiAssist/services.ts

@@ -0,0 +1,84 @@
+import { useQuery, UseQueryResult, useMutation, UseMutationResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { AiAvailable, AiCompletion } from './types';
+
+/**
+ * The providers+models this label may actually use right now - empty means
+ * no provider is enabled, which is the signal every AI-assist entry point
+ * hides itself on. Cached briefly (not Infinity like the settings query -
+ * this is admin-only and an admin who just enabled a provider should not
+ * have to reload the whole app to see it).
+ */
+export const useAiAvailable = (): UseQueryResult<AiAvailable> => (
+  useQuery({
+    queryKey: [ 'ai-available' ],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/ai/admin/available')
+        .then(response => (
+          response.data
+        ))
+    ),
+    staleTime: 60000
+  })
+);
+
+interface GenerateInput {
+  provider?: string
+  model?: string
+  prompt: string
+}
+
+export const useAiGenerate = (): UseMutationResult<AiCompletion, Error, GenerateInput, unknown> => (
+  useMutation({
+    mutationKey: [ 'ai-generate' ],
+    mutationFn: async (data: GenerateInput) => (
+      await apiClient
+        .post('/api/ai/admin/generate', data)
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+interface TranslateInput {
+  provider?: string
+  model?: string
+  text: string
+  target_locale: string
+  source_locale?: string
+}
+
+export const useAiTranslate = (): UseMutationResult<AiCompletion, Error, TranslateInput, unknown> => (
+  useMutation({
+    mutationKey: [ 'ai-translate' ],
+    mutationFn: async (data: TranslateInput) => (
+      await apiClient
+        .post('/api/ai/admin/translate', data)
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+interface ImproveInput {
+  provider?: string
+  model?: string
+  text: string
+  instruction: string
+}
+
+export const useAiImprove = (): UseMutationResult<AiCompletion, Error, ImproveInput, unknown> => (
+  useMutation({
+    mutationKey: [ 'ai-improve' ],
+    mutationFn: async (data: ImproveInput) => (
+      await apiClient
+        .post('/api/ai/admin/improve', data)
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/AiAssist/styles.ts

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+export const Trigger = styled.div`
+  display: flex;
+  gap: 6px;
+  margin: 6px 0 12px;
+
+  button {
+    font-size: ${ props => props.theme.size.xs };
+    padding: 4px 10px;
+    border-radius: ${ props => props.theme.borderRadius };
+    border: 1px solid ${ props => props.theme.inputs.border };
+    background: ${ props => props.theme.background.box };
+    cursor: pointer;
+
+    &:hover {
+      background: ${ props => props.theme.background.neutral };
+    }
+  }
+`;
+
+export const Row = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+`;
+
+export const Field = styled.label`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: ${ props => props.theme.size.s };
+  flex: 1;
+  min-width: 160px;
+
+  select, input, textarea {
+    padding: 8px 10px;
+    border: 1px solid ${ props => props.theme.inputs.border };
+    border-radius: ${ props => props.theme.borderRadius };
+    font-size: ${ props => props.theme.size.s };
+  }
+`;
+
+export const Compare = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-bottom: 14px;
+
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+`;
+
+export const Pane = styled.div`
+  border: 1px solid ${ props => props.theme.inputs.border };
+  border-radius: ${ props => props.theme.borderRadius };
+  padding: 10px;
+  max-height: 320px;
+  overflow-y: auto;
+  font-size: ${ props => props.theme.size.s };
+
+  h4 {
+    margin: 0 0 8px;
+    color: ${ props => props.theme.font.faded };
+    font-size: ${ props => props.theme.size.xs };
+    text-transform: uppercase;
+  }
+`;
+
+export const Draft = styled.textarea`
+  width: 100%;
+  min-height: 260px;
+  padding: 10px;
+  border: 1px solid ${ props => props.theme.inputs.border };
+  border-radius: ${ props => props.theme.borderRadius };
+  font-family: monospace;
+  font-size: ${ props => props.theme.size.s };
+  margin-bottom: 14px;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+`;
+
+export const Error = styled.p`
+  color: ${ props => props.theme.font.error };
+  font-size: ${ props => props.theme.size.s };
+  margin-bottom: 10px;
+`;

package/AiAssist/types.ts

@@ -0,0 +1,12 @@
+export interface AiProviderOption {
+  models: string[]
+  default_model: string
+}
+
+export type AiAvailable = Record<string, AiProviderOption>;
+
+export interface AiCompletion {
+  content: string
+  provider: string
+  model: string
+}

package/CHANGELOG.md

@@ -1,6 +1,35 @@
 # Changelog
 
 
+## 1.30.0
+
+### Changed
+
+- **`Viewer`'s field grid stays at two columns on every screen width.** It
+  used to widen to three columns at >=1300px - fine for a form of
+  independent, unrelated fields, but a form built for a two-column rhythm
+  (one field, a divider row, a related pair, a divider row, ...) reflows
+  into three and starts mixing fields from different logical groups onto
+  the same row, with nothing to say which group a given row belongs to.
+  Affects every Viewer-based form in the app, not just admin-label's.
+
+## 1.29.0
+
+### Added
+
+- **`AiFieldAssist` + the AI review modal.** The one AI-review surface every
+  content admin form shares - Generate/Improve/Translate triggers that open
+  a modal where a draft is always reviewed (and can be hand-edited or
+  revised on a follow-up instruction) before an explicit Insert writes it
+  into the calling field. Renders nothing at all when no AI provider is
+  enabled for the label - the visibility gate the AI plan calls for, with
+  no separate flag to keep in sync.
+- **`Viewer`'s `'component'` field type accepts a function** of the form's
+  own `setValue`, not just plain JSX - the only way a component embedded in
+  the field list (AiFieldAssist writing a draft into a SIBLING field like
+  content_en) can reach state Viewer has always kept internal. Existing
+  callers passing plain JSX are unaffected.
+
 ## 1.28.0
 
 ### Added

package/Viewer/Data.tsx

@@ -66,7 +66,11 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       );
 
     case 'component':
-      return <div className="row-data">{ item.value }</div>;
+      return (
+        <div className="row-data">
+          { typeof item.value === 'function' ? item.value(onUpdate) : item.value }
+        </div>
+      );
 
     case 'display':
       return <Display className="row-data">{ value.string }</Display>;
@@ -115,7 +119,9 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } step="0.01" />;
 
     case 'link':
-      return <Linked id={ id } value={ item.value } url={ item.url } />;
+      // The function-value variant only ever arrives on a 'component' row -
+      // see ViewData.value's docblock.
+      return <Linked id={ id } value={ item.value as (string | number | JSX.Element | undefined) } url={ item.url } />;
 
     case 'number':
       return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } />

package/Viewer/styles.ts

@@ -28,7 +28,7 @@ export const Container = styled.div`
 
     /*
      * Edited: Ferjolt Ozuni - Date: 2026-08-07
-     * A rich-text editor gets the full row. At a third of the width it has
+     * A rich-text editor gets the full row - even at half the width it has
      * less room for its own toolbar than for the text, and every consumer
      * that uses one wants it wide - so this belongs here rather than as a
      * flag each caller has to remember to pass.
@@ -38,11 +38,17 @@ export const Container = styled.div`
     }
   }
 
-  @media (min-width: 1300px) {
-    & > div {
-      flex-basis: calc(33.33333% - 14px);
-    }
-  }
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-08
+   * DELIBERATELY no wider breakpoint pushing this to three columns - it
+   * used to (>=1300px, flex-basis 33%), and the result was a grid with no
+   * visual boundary between one logical group's fields and the next: a
+   * form built for a two-column rhythm (field, spacer-row, field pair,
+   * spacer-row, ...) reflowed into three columns and mixed unrelated
+   * fields onto the same row. Every admin-label tab (and every other
+   * Viewer-based form in the app) now stays at the same two-column layout
+   * from 540px up, at any screen width.
+   */
 `;
 
 export const ContainerActions = styled.div`

package/Viewer/types.ts

@@ -1,10 +1,19 @@
+import { UseFormSetValue } from 'react-hook-form';
 import { DropdownData } from '@autobusal/providers/types/other';
 
 export interface ViewData {
   label?: string
   name?: string
   type?: 'text' | 'select' | 'date' | 'dob' | 'picker' | 'textarea' | 'textarea-html' | 'file' | 'files' | 'email' | 'password' | 'display' | 'component' | 'checkbox' | 'checkbox-list' | 'checkbox-list-all' | 'link' | 'number' | 'float' | 'date-picker'
-  value?: string | number | JSX.Element
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-08
+   * A 'component' row's value may be a function of the form's own
+   * setValue instead of plain JSX - the only way a component embedded in
+   * the field list (e.g. AiFieldAssist, writing an AI draft into a
+   * SIBLING field like content_en) can reach the Viewer's internal
+   * react-hook-form state, which nothing outside Viewer has access to.
+   */
+  value?: string | number | JSX.Element | ((onUpdate: UseFormSetValue<any>) => JSX.Element)
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-06
    * Leading empty option for a select, for "nothing chosen". Without one a

package/index.ts

@@ -1,3 +1,4 @@
+import AiFieldAssist from './AiAssist/AiFieldAssist';
 import ApiDetails from './ApiDetails/ApiDetails';
 import Autocomplete from './Autocomplete/Autocomplete';
 import Avatar from './Avatar';
@@ -45,6 +46,7 @@ import useUnderConstruction from './UnderConstruction/useUnderConstruction';
 import Viewer from './Viewer/Viewer';
 
 export {
+  AiFieldAssist,
   ApiDetails,
   Autocomplete,
   Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.28.0",
+  "version": "1.30.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"