@dialob/composer-material 0.0.15 → 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';
@@ -18,7 +19,7 @@ import { VisibilityField } from '../items/ItemComponents';
 
 declare interface ApiResponse {
     success: boolean;
-    result?: SaveResult | DuplicateResult | CreateTagResult | ChangeIdResult | CreateSessionResult;
+    result?: SaveResult | DuplicateResult | CreateTagResult | ChangeIdResult | CreateSessionResult | TranslationResponse;
     apiError?: any;
 }
 
@@ -32,6 +33,7 @@ declare interface AppConfig {
     tenantId: string;
     credentialMode: RequestCredentials;
     version: string;
+    translationServiceUrl?: string;
 }
 
 declare interface BackendState {
@@ -47,6 +49,7 @@ declare interface BackendState {
     getTags(formName: string): Promise<ComposerTag[]>;
     changeItemId(form: ComposerState, oldId: string, newId: string): Promise<ApiResponse>;
     createPreviewSession(formId: string, language: string, context?: PreviewSessionContext): Promise<ApiResponse>;
+    translateEntries(request: TranslationRequest): Promise<ApiResponse>;
 }
 
 declare namespace BackendTypes {
@@ -63,6 +66,10 @@ declare namespace BackendTypes {
         TransportConfig,
         DialobComposerConfig,
         AppConfig,
+        TranslationEntry,
+        TranslationRequest,
+        TranslationResult,
+        TranslationResponse,
         BackendState
     }
 }
@@ -129,6 +136,7 @@ declare type ComposerMetadata = {
     contextValues?: {
         [name: string]: string;
     };
+    aiTranslations?: TranslationMetadata[];
 };
 
 declare type ComposerState = {
@@ -166,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;
@@ -253,6 +261,7 @@ declare interface DialobComposerConfig {
     itemTypes: ItemTypeConfig;
     backendVersion: string;
     closeHandler: () => void;
+    translationServiceUrl?: string;
 }
 
 declare type DialobItem = DialobItemTemplate & {
@@ -273,6 +282,7 @@ declare type DialobItemTemplate = {
     activeWhen?: string;
     canAddRowWhen?: string;
     canRemoveRowWhen?: string;
+    readOnlyWhen?: string;
     items?: string[];
     className?: string[];
     props?: {
@@ -300,6 +310,7 @@ declare namespace DialobTypes {
         DialobItems,
         VisibilityType,
         ComposerTag,
+        TranslationMetadata,
         ComposerMetadata,
         ComposerState,
         FormMetadata,
@@ -333,6 +344,8 @@ declare type ErrorSeverity = 'ERROR' | 'WARNING' | 'INFO' | 'FATAL';
 
 declare namespace ErrorUtils {
     export {
+        parseVariableItemId,
+        parseRowgroupIdFromVariableItemId,
         getErrorSeverity,
         getItemErrorColor,
         useErrorColorSx,
@@ -355,6 +368,7 @@ declare interface FlattenedItem extends TreeItem {
     depth: number;
     index: number;
     isFallbackLabel?: boolean;
+    isVariable?: boolean;
 }
 
 declare type FormMetadata = {
@@ -393,10 +407,7 @@ export declare const GlobalList: default_2.FC<{
     entries?: ValueSetEntry[];
 }>;
 
-export declare const GlobalListsDialog: default_2.FC<{
-    open: boolean;
-    onClose: () => void;
-}>;
+export declare const GlobalListsDialog: default_2.FC;
 
 export declare const Group: default_2.FC<{
     item: DialobItem;
@@ -428,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;
@@ -487,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;
@@ -543,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;
@@ -558,6 +573,7 @@ declare interface SavingState {
     composerMetadata?: ComposerMetadata;
     variables?: (ContextVariable | Variable)[];
     formMetadata?: FormMetadata;
+    items?: DialobItems;
 }
 
 export declare const SimpleField: default_2.FC<{
@@ -576,8 +592,36 @@ export declare const TranslationDialog: default_2.FC<{
     onClose: () => void;
 }>;
 
+declare interface TranslationEntry {
+    id: string;
+    text: string;
+}
+
 export declare const TranslationFileEditor: default_3.FC;
 
+declare type TranslationMetadata = {
+    entryId: string;
+    sourceLanguage: string;
+    targetLanguage: string;
+    timestamp: string;
+};
+
+declare interface TranslationRequest {
+    sourceLanguage: string;
+    targetLanguage: string;
+    entries: TranslationEntry[];
+}
+
+declare interface TranslationResponse {
+    translations: TranslationResult[];
+    targetLanguage: string;
+}
+
+declare interface TranslationResult {
+    id: string;
+    translatedText: string;
+}
+
 declare interface TransportConfig {
     csrf?: {
         headerName: string;
@@ -596,6 +640,7 @@ declare interface TreeItem {
     collapsible?: boolean;
     collapsed?: boolean;
     isFallbackLabel?: boolean;
+    isVariable?: boolean;
 }
 
 export declare const UploadValuesetDialog: default_2.FC<{
@@ -632,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;
@@ -646,6 +692,8 @@ export declare const useComposer: () => {
     applyListChanges: (newState: SavingState) => void;
     applyVariableChanges: (newState: SavingState) => void;
     applyFormChanges: (newState: SavingState) => void;
+    applyTranslations: (translations: TranslationResult[], sourceLanguage: string, targetLanguage: string) => void;
+    removeAITranslation: (entryId: string, targetLanguage: string) => void;
     form: ComposerState;
 };
 
@@ -661,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;