@dialob/composer-material 0.0.16 → 0.0.17

package/README.md

@@ -101,6 +101,41 @@ pnpm run preview
 
 Starts preview server for built application from `/dist` (No hot-reload!). Run `pnpm build` first to build the package
 
+## AI Translation Feature
+
+The composer includes an AI-powered translation feature that helps automate the translation of form content across multiple languages.
+
+### Configuration
+
+The AI translation feature needs `translationServiceUrl` to be set in `AppConfig` - it can come from the backend (`config.translationServiceUrl` configuration parameter) or be set manually in the app config (e.g. in `index.html`). This is the URL of the translation service API, including the path to the translation service endpoint.
+
+```typescript
+export const appConfig: AppConfig = {
+  ...
+  translationServiceUrl: 'http://localhost:8083/api/translate',
+}
+```
+
+### Key Features
+
+- **Automated Translation**: Translate labels, descriptions, validation messages, and value set entries from one language to another using AI
+- **Translation Tracking**: All AI-generated translations are tracked with metadata including:
+  - Source and target languages
+  - Translation timestamp
+  - Translation type (label, description, validation, etc.)
+- **Visual Indicators**: AI-translated content is marked with a visual indicator in the translation editor
+- **Manual Validation**: Users can review AI translations and remove the AI flag once validated
+- **Bulk Operations**: Support for translating entire choice lists and multiple form elements at once
+
+### Usage
+
+The AI translation feature is available in multiple places in the composer, either for translating single items or in bulk:
+- in the translation dialog (for translating entire form content)
+- in the item options dialog (for translating single items)
+- in the choice editor (for translating value set entries)
+
+The source language is always the active form language. Translations can be validated by clicking the AI indicator.
+
 ### Item type configuration
 
 Item type configuration defines the structure of the "Add Item" menu and available item types with their properties and behavior.

package/dist-lib/index.d.ts

@@ -7,6 +7,7 @@ import { EditorState } from '..';
 import { FunctionComponent } from '../../node_modules/@types/react';
 import { IdField } from '../items/ItemComponents';
 import { Indicators } from '../items/ItemComponents';
+import { default as ItemOptionsDialog } from '../dialogs/ItemOptionsDialog';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LabelField } from '../items/ItemComponents';
 import { LanguageEditor } from '../components/translations/LanguageEditor';
@@ -173,7 +174,7 @@ declare interface ConfigItemProps {
 
 export declare const ConfirmationDialog: default_2.FC;
 
-declare type ConfirmationDialogType = 'duplicate' | 'delete';
+declare type ConfirmationDialogType = 'duplicate' | 'delete' | 'deleteVariable';
 
 declare type ContextVariable = {
     name: string;
@@ -281,6 +282,7 @@ declare type DialobItemTemplate = {
     activeWhen?: string;
     canAddRowWhen?: string;
     canRemoveRowWhen?: string;
+    readOnlyWhen?: string;
     items?: string[];
     className?: string[];
     props?: {
@@ -342,6 +344,8 @@ declare type ErrorSeverity = 'ERROR' | 'WARNING' | 'INFO' | 'FATAL';
 
 declare namespace ErrorUtils {
     export {
+        parseVariableItemId,
+        parseRowgroupIdFromVariableItemId,
         getErrorSeverity,
         getItemErrorColor,
         useErrorColorSx,
@@ -364,6 +368,7 @@ declare interface FlattenedItem extends TreeItem {
     depth: number;
     index: number;
     isFallbackLabel?: boolean;
+    isVariable?: boolean;
 }
 
 declare type FormMetadata = {
@@ -434,9 +439,9 @@ declare interface ItemConfigItem {
     props: ConfigItemProps;
 }
 
-export declare const itemFactory: (item: DialobItem, itemConfig: ItemConfig, setHighlightedItem?: (item: DialobItem) => void, props?: any) => JSX_2.Element | null;
+export declare const itemFactory: (item: DialobItem | string, itemConfig: ItemConfig, setHighlightedItem?: (item: DialobItem) => void, props?: any) => JSX_2.Element | null;
 
-export declare const ItemOptionsDialog: default_2.FC;
+export { ItemOptionsDialog }
 
 declare interface ItemProp {
     key: string;
@@ -493,6 +498,10 @@ export declare const PageTabs: default_2.FC<{
     items: DialobItems;
 }>;
 
+declare const parseRowgroupIdFromVariableItemId: (itemId: string) => string | undefined;
+
+declare const parseVariableItemId: (itemId: string) => string;
+
 export declare const PreviewDialog: default_2.FC<{
     open: boolean;
     onClose: () => void;
@@ -549,7 +558,7 @@ export declare const RuleEditor: default_3.FC<{
 
 export declare const RulesEditor: default_3.FC;
 
-declare type RuleType = 'visibility' | 'requirement' | 'canaddrow' | 'canremoverow';
+declare type RuleType = 'visibility' | 'requirement' | 'readOnly' | 'canaddrow' | 'canremoverow';
 
 declare interface SaveResult {
     ok: boolean;
@@ -564,6 +573,7 @@ declare interface SavingState {
     composerMetadata?: ComposerMetadata;
     variables?: (ContextVariable | Variable)[];
     formMetadata?: FormMetadata;
+    items?: DialobItems;
 }
 
 export declare const SimpleField: default_2.FC<{
@@ -630,6 +640,7 @@ declare interface TreeItem {
     collapsible?: boolean;
     collapsed?: boolean;
     isFallbackLabel?: boolean;
+    isVariable?: boolean;
 }
 
 export declare const UploadValuesetDialog: default_2.FC<{
@@ -666,6 +677,7 @@ export declare const useComposer: () => {
     setMetadataValue: (attr: string, value: any) => void;
     setContextValue: (name: string, value: string) => void;
     createVariable: (context: boolean) => void;
+    createScopedExpressionVariable: (rowgroupId: string, callbacks?: ComposerCallbacks) => void;
     updateContextVariable: (variableId: string, contextType?: ContextVariableType | string, defaultValue?: any) => void;
     updateExpressionVariable: (variableId: string, expression: string) => void;
     updateVariablePublishing: (variableId: string, published: boolean) => void;
@@ -697,6 +709,7 @@ export declare const useEditor: () => {
     setHighlightedItem: (item?: DialobItem) => void;
     setActiveList: (listId?: string) => void;
     setActiveVariableTab: (tab?: VariableTabType) => void;
+    setActiveVariable: (variableId?: string, idEditMode?: boolean) => void;
     setConfirmationActiveItem: (item?: DialobItem) => void;
     toggleItemCollapsed: (itemId: string) => void;
     setMarkdownHelpDialogOpen: (open: boolean) => void;