AI: Init, add .d.ts, add separate build, add tests

packages/devextreme/build/gulp/js-bundles.js

@@ -20,6 +20,7 @@ const namedDebug = lazyPipe()
     .pipe(named, (file) => path.basename(file.path, path.extname(file.path)) + '.debug');
 
 const BUNDLES = [
+    '/bundles/dx.ai.js',
     '/bundles/dx.all.js',
     '/bundles/dx.web.js',
     '/bundles/dx.viz.js'
@@ -53,8 +54,10 @@ const jsBundlesProd = (src, dist, bundles) => (() =>
 );
 
 gulp.task('js-bundles-prod',
-    jsBundlesProd(ctx.TRANSPILED_PROD_RENOVATION_PATH,
-        ctx.RESULT_JS_PATH, BUNDLES
+    jsBundlesProd(
+        ctx.TRANSPILED_PROD_RENOVATION_PATH,
+        ctx.RESULT_JS_PATH,
+        BUNDLES,
     )
 );
 

packages/devextreme/js/__internal/core/ai/commands/base.test.ts

@@ -0,0 +1,182 @@
+import {
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import type { Prompt } from '@js/ai/ai';
+import { BaseCommand } from '@ts/core/ai/commands/base';
+import type { RequestCallbacks, RequestManager } from '@ts/core/ai/core//request_manager';
+import type { PromptData, PromptManager, PromptTemplateName } from '@ts/core/ai/core/prompt_manager';
+
+interface TestCommandParams {
+  first: string;
+  second: string;
+}
+
+class TestCommand extends BaseCommand {
+  getTemplateName(): PromptTemplateName {
+    return 'test' as PromptTemplateName;
+  }
+
+  buildPromptData(params: TestCommandParams): PromptData {
+    const data = {
+      user: { first: params?.first },
+      system: { second: params?.second },
+    };
+
+    return data;
+  }
+
+  parseResult(response: string): string {
+    return `Parsed result: ${response}`;
+  }
+}
+
+describe('BaseCommand Unit', () => {
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let promptManager: PromptManager;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let requestManager: RequestManager;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let command: TestCommand;
+
+  beforeEach(() => {
+    promptManager = {
+      buildPrompt: (): Prompt => ({
+        system: 'systemMessage',
+        user: 'userMessage',
+      }),
+    } as unknown as PromptManager;
+
+    requestManager = {
+      sendRequest: (_: Prompt, callbacks: RequestCallbacks) => {
+        callbacks?.onComplete?.('AI response');
+
+        return (): void => {};
+      },
+    } as unknown as RequestManager;
+
+    command = new TestCommand(promptManager, requestManager);
+  });
+
+  describe('constructor', () => {
+    it('Stores PromptManager and RequestManager correctly', () => {
+      // @ts-ignore
+      expect(command.promptManager).toBe(promptManager);
+      // @ts-ignore
+      expect(command.requestManager).toBe(requestManager);
+    });
+  });
+
+  describe('execute', () => {
+    it('getTemplateName returns value correctly', () => {
+      const spy = jest.spyOn(command, 'getTemplateName');
+
+      command.execute({}, {});
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveReturnedWith('test');
+    });
+
+    it('buildPromptData receives and returns correct data', () => {
+      const params: TestCommandParams = { first: 'first', second: 'second' };
+      const spy = jest.spyOn(command, 'buildPromptData');
+
+      command.execute(params, {});
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(params);
+      expect(spy).toHaveReturnedWith({
+        user: { first: params.first },
+        system: { second: params.second },
+      });
+    });
+
+    it('parseResult receives correct value and returns expected result', () => {
+      const spy = jest.spyOn(command, 'parseResult');
+
+      command.execute({}, {});
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith('AI response');
+      expect(spy).toHaveReturnedWith('Parsed result: AI response');
+    });
+
+    it('callbacks are called correctly', () => {
+      const callbacks = {
+        onComplete: jest.fn(),
+        onError: jest.fn(),
+        onChunk: jest.fn(),
+      };
+
+      command.execute({}, callbacks as RequestCallbacks);
+
+      expect(callbacks.onComplete).toHaveBeenCalledTimes(1);
+      expect(callbacks.onError).toHaveBeenCalledTimes(0);
+      expect(callbacks.onChunk).toHaveBeenCalledTimes(0);
+    });
+
+    it('onComplete is called with parseResult output', () => {
+      const callbacks = {
+        onComplete: jest.fn(),
+      };
+
+      command.execute({}, callbacks as RequestCallbacks);
+
+      expect(callbacks.onComplete).toHaveBeenCalledWith('Parsed result: AI response');
+    });
+
+    it('calls onError if request fails', () => {
+      const originalSendRequest = requestManager.sendRequest;
+
+      requestManager.sendRequest = (_, callbacks) => {
+        callbacks.onError?.(new Error('Test error'));
+
+        return (): void => {};
+      };
+
+      try {
+        const callbacks = {
+          onError: jest.fn(),
+          onComplete: jest.fn(),
+        };
+
+        command.execute({}, callbacks as RequestCallbacks);
+
+        expect(callbacks.onError).toHaveBeenCalledTimes(1);
+        expect(callbacks.onError).toHaveBeenCalledWith(new Error('Test error'));
+        expect(callbacks.onComplete).toHaveBeenCalledTimes(0);
+      } finally {
+        requestManager.sendRequest = originalSendRequest;
+      }
+    });
+
+    it('calls onChunk for each chunk', () => {
+      const originalSendRequest = requestManager.sendRequest;
+
+      requestManager.sendRequest = (_, callbacks) => {
+        callbacks.onChunk?.('first');
+        callbacks.onChunk?.('second');
+        callbacks.onComplete?.('first second');
+
+        return (): void => {};
+      };
+
+      try {
+        const onChunk = jest.fn();
+        const onComplete = jest.fn();
+
+        command.execute({}, { onChunk, onComplete });
+
+        expect(onChunk).toHaveBeenCalledTimes(2);
+        expect(onChunk).toHaveBeenNthCalledWith(1, 'first');
+        expect(onChunk).toHaveBeenNthCalledWith(2, 'second');
+        expect(onComplete).toHaveBeenCalledTimes(1);
+      } finally {
+        requestManager.sendRequest = originalSendRequest;
+      }
+    });
+  });
+});

packages/devextreme/js/__internal/core/ai/commands/base.ts

@@ -0,0 +1,35 @@
+import type { TranslateResult } from '@ts/core/ai/commands/translate';
+import type { PromptData, PromptManager, PromptTemplateName } from '@ts/core/ai/core/prompt_manager';
+import type { RequestCallbacks, RequestManager } from '@ts/core/ai/core/request_manager';
+
+export type BaseResult = TranslateResult;
+
+export abstract class BaseCommand {
+  constructor(
+    protected promptManager: PromptManager,
+    protected requestManager: RequestManager,
+  ) {}
+
+  public execute(params: unknown, callbacks: RequestCallbacks): () => void {
+    const templateName = this.getTemplateName();
+    const data = this.buildPromptData(params);
+
+    const prompt = this.promptManager.buildPrompt(templateName, data);
+
+    const abort = this.requestManager.sendRequest(prompt, {
+      onChunk: (chunk) => { callbacks?.onChunk?.(chunk); },
+      onComplete: (result) => {
+        const finalResponse = this.parseResult(result);
+
+        callbacks?.onComplete?.(finalResponse);
+      },
+      onError: (error) => { callbacks?.onError?.(error); },
+    });
+
+    return abort;
+  }
+
+  protected abstract getTemplateName(): PromptTemplateName;
+  protected abstract buildPromptData(params: unknown): PromptData;
+  protected abstract parseResult(response: string): BaseResult;
+}

packages/devextreme/js/__internal/core/ai/commands/translate.ts

@@ -0,0 +1,28 @@
+import { BaseCommand } from '@ts/core/ai/commands/base';
+import type { PromptData, PromptTemplateName } from '@ts/core/ai/core/prompt_manager';
+
+export type TranslateResult = string;
+
+export interface TranslateCommandParams {
+  text: string;
+  lang: string;
+}
+
+export class TranslateCommand extends BaseCommand {
+  protected getTemplateName(): PromptTemplateName {
+    return 'translate';
+  }
+
+  protected buildPromptData(params: TranslateCommandParams): PromptData {
+    return {
+      user: {
+        text: params.text,
+        lang: params.lang,
+      },
+    };
+  }
+
+  protected parseResult(response: string): TranslateResult {
+    return response;
+  }
+}

packages/devextreme/js/__internal/core/ai/core/ai.test.ts

@@ -0,0 +1,37 @@
+import {
+  describe,
+  expect,
+  test,
+} from '@jest/globals';
+import type { ResponseParams } from '@js/ai/ai';
+import { AI } from '@ts/core/ai/core/ai';
+
+describe('AI Integration', () => {
+  test('sendRequest is called with correct parameters', (done) => {
+    expect.assertions(2);
+
+    const sendRequest = ({ prompt, onChunk }): ResponseParams => {
+      expect(prompt).toEqual({
+        system: 'You are a translation assistant.',
+        user: 'Translate text to fr language.',
+      });
+
+      expect(typeof onChunk).toBe('function');
+
+      return {
+        promise: Promise.resolve(),
+        abort: (): void => {},
+      };
+    };
+
+    const ai = new AI({ sendRequest });
+
+    ai.translate(
+      { text: 'text', lang: 'fr' },
+      {
+        onComplete: () => done(),
+        onChunk: () => {},
+      },
+    );
+  });
+});

packages/devextreme/js/__internal/core/ai/core/ai.ts

@@ -0,0 +1,35 @@
+import type { AIProvider } from '@js/ai/ai';
+import type { BaseCommand } from '@ts/core/ai/commands/base';
+import type { TranslateCommandParams } from '@ts/core/ai/commands/translate';
+import { TranslateCommand } from '@ts/core/ai/commands/translate';
+import { PromptManager } from '@ts/core/ai/core/prompt_manager';
+import type { RequestCallbacks } from '@ts/core/ai/core/request_manager';
+import { RequestManager } from '@ts/core/ai/core/request_manager';
+
+export class AI {
+  private readonly promptManager: PromptManager;
+
+  private readonly requestManager: RequestManager;
+
+  constructor(provider: AIProvider) {
+    this.promptManager = new PromptManager();
+    this.requestManager = new RequestManager(provider);
+  }
+
+  private execute<F extends BaseCommand>(
+    Command: new (
+      promptManager: PromptManager,
+      requestManager: RequestManager,
+    ) => F,
+    params: unknown,
+    callbacks: RequestCallbacks,
+  ): () => void {
+    const command = new Command(this.promptManager, this.requestManager);
+
+    return command.execute(params, callbacks);
+  }
+
+  public translate(params: TranslateCommandParams, callbacks: RequestCallbacks): () => void {
+    return this.execute(TranslateCommand, params, callbacks);
+  }
+}

packages/devextreme/js/__internal/core/ai/core/prompt_manager.ts

@@ -0,0 +1,52 @@
+import type { Prompt } from '@js/ai/ai';
+import { templates } from '@ts/core/ai/templates/index';
+
+export interface PromptData {
+  system?: Record<string, string>;
+  user?: Record<string, string>;
+}
+
+export interface PromptTemplate {
+  system: string;
+  user: string;
+}
+
+export type PromptTemplateName = 'translate';
+
+export type PromptTemplates = Map<PromptTemplateName, PromptTemplate>;
+
+export class PromptManager {
+  private readonly templates: PromptTemplates;
+
+  constructor() {
+    this.templates = new Map(Object.entries(templates) as [PromptTemplateName, PromptTemplate][]);
+  }
+
+  public buildPrompt(templateName: PromptTemplateName, data: PromptData): Prompt {
+    const template = this.templates.get(templateName);
+
+    if (!template) {
+      throw new Error('Template not found');
+    }
+
+    const system = this.replacePlaceholders(template.system, data.system);
+    const user = this.replacePlaceholders(template.user, data.user);
+
+    const prompt = { system, user };
+
+    return prompt;
+  }
+
+  private replacePlaceholders(prompt: string, placeholders?: Record<string, string>): string {
+    if (!placeholders) {
+      return prompt;
+    }
+
+    const result = Object.entries(placeholders).reduce(
+      (acc, [key, value]) => acc.split(`{{${key}}}`).join(value),
+      prompt,
+    );
+
+    return result;
+  }
+}