// Browser layer
import { AINativeModule } from '@opensumi/ide-ai-native/lib/browser';
import { DesignModule } from '@opensumi/ide-design/lib/browser';

renderApp({
  modules: [...CommonBrowserModules, DesignModule, AINativeModule]
});

// Server layer
import { AINativeModule } from '@opensumi/ide-ai-native/lib/node';

startServer({
  modules: [...CommonNodeModules, AINativeModule]
});

import { AINativeCoreContribution } from '@opensumi/ide-ai-native/lib/browser/types';

@Domain(AINativeCoreContribution)
export class AiNativeContribution implements AINativeCoreContribution {
  // Register various AI capabilities here
}

const injector = new Injector();
injector.addProviders(AiNativeContribution);

opts.injector = injector;
const app = new ClientApp(opts);

@Injectable()
export class AiBackService implements IAIBackService<ReqeustResponse, ChatReadableStream> {
  // Here you can interact with any large model API interface
}

import { AIBackSerivceToken } from '@opensumi/ide-core-common';

const injector = new Injector();
injector.addProviders({
  token: AIBackSerivceToken,
  useClass: AiBackService
});

opts.injector = injector;
const serverApp = new ServerApp(opts);

@Domain(AINativeCoreContribution)
export class AiNativeContribution implements AINativeCoreContribution {
  // Obtain the registered backend service through AIBackSerivcePath
  // At this point, you can directly RPC call the functions provided by the backend service
  @Autowired(AIBackSerivcePath)
  private readonly aiBackService: IAIBackService;

  registerInlineChatFeature(registry: IInlineChatFeatureRegistry) {
    registry.registerEditorInlineChat(
      {
        id: 'ai-comments',
        name: 'Comments',
        title: 'add comments',
        renderType: 'button',
        codeAction: {}
      },
      {
        execute: async (editor: IEditor) => {
          // Handle any interaction after the inline chat button is clicked here
        }
      }
    );
  }
}

export class ReplyResponse {
  constructor(readonly message: string) {}

  static is(response: any): boolean {
    return (
      response instanceof ReplyResponse ||
      (typeof response === 'object' && response.message !== undefined)
    );
  }
}

export class ErrorResponse {
  constructor(readonly error: any, readonly message?: string) {}

  static is(response: any): boolean {
    return (
      response instanceof ErrorResponse ||
      (typeof response === 'object' && response.error !== undefined)
    );
  }
}

export class CancelResponse {
  readonly cancellation: boolean = true;

  constructor(readonly message?: string) {}

  static is(response: any): boolean {
    return (
      response instanceof CancelResponse ||
      (typeof response === 'object' && response.cancellation !== undefined)
    );
  }
}

export type ChatResponse = ReplyResponse | ErrorResponse | CancelResponse;

// Register inline chat in the editor
registerInlineChatFeature(registry: IInlineChatFeatureRegistry) {
  registry.registerEditorInlineChat(
    {
      id: 'comments',
      name: 'Comments',
    },
    {
      providerDiffPreviewStrategy: async (editor: ICodeEditor, token) => {
        const crossCode = this.getCrossCode(editor);
        const prompt = `Comment the code: \`\`\`${crossCode}\`\`\`. It is required to return only the code results without explanation.`;
      },
    },
  );
}

// Register inline chat in the terminal area
registry.registerTerminalInlineChat(
  {
    id: 'terminal',
    name: 'terminal',
  },
  {
    triggerRules: 'selection',
    execute: async (stdout: string) => {},
  },
);

registerChatFeature(registry: IChatFeatureRegistry): void {
  registry.registerWelcome(
    new MarkdownString(`Hello, I am your dedicated AI assistant, here to answer questions about code and help you think. You can ask me some questions about code.`),
    [
      {
        icon: getIcon('send-hollow'),
        title: 'Generate a Java Quicksort Algorithm',
        message: 'Generate a Java Quicksort Algorithm',
      },
    ],
  );

  registry.registerSlashCommand(
    {
      name: 'Explain',
      description: 'Explain',
      isShortcut: true,
      tooltip: 'Explain',
    },
    {
      providerRender: CustomSlashCommand,
      providerInputPlaceholder(value, editor) {
        return 'Please enter or paste the code.';
      },
      providerPrompt(value, editor) {
        return `Explain code: \`\`\`\n ${value}\`\`\``;
      },
      execute: (value: string, send: TChatSlashCommandSend, editor: ICodeEditor) => {
        send(value);
      },
    },
  );
}

registerChatRender(registry: IChatRenderRegistry): void {
  // Directly inject React components
  registry.registerWelcomeRender(CustomWelcomeComponents);
}

registerResolveConflictFeature(registry: IResolveConflictRegistry): void {
  registry.registerResolveConflictProvider('traditional', {
    providerRequest: async (contentMetadata, options, token) => {
      return new ReplyResponse('Resolved successfully!');
    },
  });
}

registerRenameProvider(registry: IRenameCandidatesProviderRegistry): void {
  registry.registerRenameSuggestionsProvider(async (model, range, token): Promise<NewSymbolName[] | undefined> => {
    return {
      newSymbolName: 'ai rename',
      tags: [NewSymbolNameTag.AIGenerated],
    };
  });
}

registerProblemFixFeature(registry: IProblemFixProviderRegistry): void {
  registry.registerHoverFixProvider({
    provideFix: async (
      editor: ICodeEditor,
      context: IProblemFixContext,
      token: CancellationToken,
    ): Promise<ChatResponse | InlineChatController> => {
      const { marker, editRange } = context;
      const prompt = 'Self-assembled prompts for problem diagnosis';

      const controller = new InlineChatController({ enableCodeblockRender: true });
      const stream = await this.aiBackService.requestStream(prompt, {}, token);
      controller.mountReadable(stream);

      return controller;
    },
  });
}

registerIntelligentCompletionFeature(registry: IIntelligentCompletionsRegistry): void {
  registry.registerIntelligentCompletionProvider(async (editor, position, bean, token) => {
    const model = editor.getModel()!;
    const value = model.getValueInRange({
      startLineNumber: position.lineNumber,
      startColumn: 1,
      endLineNumber: position.lineNumber + 3,
      endColumn: model?.getLineMaxColumn(position.lineNumber + 3),
    });

    const cancelController = new AbortController();
    const { signal } = cancelController;

    token.onCancellationRequested(() => {
      cancelController.abort();
    });

    const getRandomString = (length) => {
      const characters = 'opensumi';
      let result = '';
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return result;
    };

    /**
     * 随机增删字符
     */
    const insertRandomStrings = (originalString) => {
      const minChanges = 2;
      const maxChanges = 5;
      const changesCount = Math.floor(Math.random() * (maxChanges - minChanges + 1)) + minChanges;
      let modifiedString = originalString;
      for (let i = 0; i < changesCount; i++) {
        const randomIndex = Math.floor(Math.random() * originalString.length);
        const operation = Math.random() < 0.5 ? 'delete' : 'insert';
        if (operation === 'delete') {
          modifiedString = modifiedString.slice(0, randomIndex) + modifiedString.slice(randomIndex + 1);
        } else {
          const randomChar = getRandomString(1);
          modifiedString = modifiedString.slice(0, randomIndex) + randomChar + modifiedString.slice(randomIndex);
        }
      }
      return modifiedString;
    };

    try {
      await new Promise((resolve, reject) => {
        const timeout = setTimeout(resolve, 1000);

        signal.addEventListener('abort', () => {
          clearTimeout(timeout);
          reject(new DOMException('Aborted', 'AbortError'));
        });
      });

      return {
        items: [
          {
            insertText: insertRandomStrings(value),
            range: {
              startLineNumber: position.lineNumber,
              startColumn: 1,
              endLineNumber: position.lineNumber + 3,
              endColumn: model?.getLineMaxColumn(position.lineNumber + 3),
            },
          },
        ],
        // Whether to enable multi-line completion
        enableMultiLine: true,
      };
    } catch (error) {
      if (error.name === 'AbortError') {
        return { items: [] };
      }
      throw error;
    }
  });
}

**Complete example code can be found in [ai-native.contribution.ts](https://github.com/opensumi/core/blob/main/packages/startup/entry/sample-modules/ai-native/ai-native.contribution.ts).**

## Related Configuration

The AI Native Config-related configuration parameters can control the on/off state of all AI capabilities.

### IAINativeConfig

| Property Name | Type                  | Description                                |
| ------------- | --------------------- | ------------------------------------------ |
| capabilities  | IAINativeCapabilities | Configuration items for AI functionalities |
| layout        | IDesignLayoutConfig   | Configuration items for layout design      |

### IAINativeCapabilities

> All the following capabilities are enabled by default.

| Property Name                  | Type    | Description                                                      |
| ------------------------------ | ------- | ---------------------------------------------------------------- |
| supportsMarkers                | boolean | Whether to enable AI capabilities to handle the problem panel    |
| supportsChatAssistant          | boolean | Whether to enable the AI chat assistant feature                  |
| supportsInlineChat             | boolean | Whether to enable the Inline Chat feature                        |
| supportsInlineCompletion       | boolean | Whether to enable the code intelligent completion feature        |
| supportsConflictResolve        | boolean | Whether to enable the AI intelligent conflict resolution feature |
| supportsRenameSuggestions      | boolean | Whether to enable the AI to provide renaming suggestions feature |
| supportsProblemFix             | boolean | Whether to enable AI problem diagnosis capability       |
| supportsTerminalDetection      | boolean | Whether to enable the AI terminal detection feature              |
| supportsTerminalCommandSuggest | boolean | Whether to enable the AI terminal command suggestion feature     |

### IDesignLayoutConfig

| Property Name              | Type    | Description                                                     |
| -------------------------- | ------- | --------------------------------------------------------------- |
| useMergeRightWithLeftPanel | boolean | Whether to merge the right panel with the left panel            |
| useMenubarView             | boolean | Whether to use the new menu bar view                            |
| menubarLogo                | string  | Sets the icon for the menu bar, which can be a path to an image |