refactor: remove mobx

configs/ts/tsconfig.build.json

@@ -46,13 +46,13 @@
       "path": "./references/tsconfig.i18n.json"
     },
     {
-      "path": "./references/tsconfig.status-bar.json"
+      "path": "./references/tsconfig.monaco.json"
     },
     {
-      "path": "./references/tsconfig.main-layout.json"
+      "path": "./references/tsconfig.status-bar.json"
     },
     {
-      "path": "./references/tsconfig.monaco.json"
+      "path": "./references/tsconfig.main-layout.json"
     },
     {
       "path": "./references/tsconfig.quick-open.json"

packages/ai-native/src/browser/chat/chat.view.tsx

@@ -1,4 +1,3 @@
-import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { MessageList } from 'react-chat-elements';
 
@@ -25,21 +24,14 @@ import {
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 
 import 'react-chat-elements/dist/main.css';
-import {
-  AI_CHAT_VIEW_ID,
-  IChatAgentService,
-  IChatInternalService,
-  IChatMessageStructure,
-  SLASH_SYMBOL,
-} from '../../common';
+import { AI_CHAT_VIEW_ID, IChatAgentService, IChatInternalService, IChatMessageStructure } from '../../common';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
 import { ChatInput } from '../components/ChatInput';
 import { ChatMarkdown } from '../components/ChatMarkdown';
 import { ChatNotify, ChatReply } from '../components/ChatReply';
 import { SlashCustomRender } from '../components/SlashCustomRender';
 import { MessageData, createMessageByAI, createMessageByUser } from '../components/utils';
 import { WelcomeMessage } from '../components/WelcomeMsg';
-import { MsgHistoryManager } from '../model/msg-history-manager';
 import { ChatViewHeaderRender, TSlashCommandCustomRender } from '../types';
 
 import { ChatRequestModel, ChatSlashCommandItemModel } from './chat-model';
@@ -57,7 +49,7 @@ interface TDispatchAction {
   payload?: MessageData[];
 }
 
-export const AIChatView = observer(() => {
+export const AIChatView = () => {
   const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
   const chatApiService = useInjectable<ChatService>(ChatServiceToken);
   const aiReporter = useInjectable<IAIReporter>(IAIReporter);
@@ -695,7 +687,7 @@ export const AIChatView = observer(() => {
       </div>
     </div>
   );
-});
+};
 
 export function DefaultChatViewHeader({
   handleClear,

packages/ai-native/src/browser/contrib/run-toolbar/run-toolbar.tsx

@@ -1,7 +1,6 @@
-import { observer } from 'mobx-react-lite';
-import React, { useEffect } from 'react';
+import React from 'react';
 
-import { localize, useInjectable } from '@opensumi/ide-core-browser';
+import { localize, useAutorun, useInjectable } from '@opensumi/ide-core-browser';
 import { DebugState } from '@opensumi/ide-debug';
 import { DebugAction } from '@opensumi/ide-debug/lib/browser/components';
 import { DebugConfigurationService } from '@opensumi/ide-debug/lib/browser/view/configuration/debug-configuration.service';
@@ -11,7 +10,7 @@ import { DebugToolbarView } from '@opensumi/ide-debug/lib/browser/view/configura
 
 import styles from './run-toolbar.module.less';
 
-const CustomDebugBar = observer(() => {
+const CustomDebugBar = () => {
   const { start } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
 
   return (
@@ -24,10 +23,11 @@ const CustomDebugBar = observer(() => {
       ></DebugAction>
     </div>
   );
-});
+};
 
-export const AIRunToolbar = observer(() => {
-  const { state } = useInjectable<DebugToolbarService>(DebugToolbarService);
+export const AIRunToolbar = () => {
+  const debugToolbarService = useInjectable<DebugToolbarService>(DebugToolbarService);
+  const state = useAutorun(debugToolbarService.state);
 
   return (
     <div className={styles.run_toolbar_container}>
@@ -38,4 +38,4 @@ export const AIRunToolbar = observer(() => {
       )}
     </div>
   );
-});
+};

packages/ai-native/src/browser/layout/tabbar.view.tsx

@@ -1,7 +1,13 @@
 import cls from 'classnames';
 import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { ComponentRegistryInfo, SlotLocation, useContextMenus, useInjectable } from '@opensumi/ide-core-browser';
+import {
+  ComponentRegistryInfo,
+  SlotLocation,
+  useAutorun,
+  useContextMenus,
+  useInjectable,
+} from '@opensumi/ide-core-browser';
 import { EDirection } from '@opensumi/ide-core-browser/lib/components';
 import {
   EnhanceIcon,
@@ -102,25 +108,26 @@ export const AILeftTabRenderer = ({
 }) => <DesignLeftTabRenderer className={className} components={components} tabbarView={AILeftTabbarRenderer} />;
 
 const AILeftTabbarRenderer: React.FC = () => {
-  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(SlotLocation.right);
   const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
 
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(SlotLocation.right);
+  const currentContainerId = useAutorun(tabbarService.currentContainerId);
+
   const extraMenus = React.useMemo(() => layoutService.getExtraMenu(), [layoutService]);
   const [navMenu] = useContextMenus(extraMenus);
 
   const renderOtherVisibleContainers = useCallback(
     ({ renderContainers }) => {
-      const { currentContainerId, handleTabClick } = tabbarService;
       const visibleContainers = tabbarService.visibleContainers.filter((container) => !container.options?.hideTab);
 
       return (
         <>
           {visibleContainers.length > 0 && <HorizontalVertical margin={'8px auto 0px'} width={'60%'} />}
-          {visibleContainers.map((component) => renderContainers(component, handleTabClick, currentContainerId))}
+          {visibleContainers.map((component) => renderContainers(component, currentContainerId))}
         </>
       );
     },
-    [tabbarService],
+    [currentContainerId, tabbarService],
   );
 
   return (

packages/ai-native/src/browser/widget/inline-chat/inline-chat-editor.controller.ts

@@ -1,27 +1,33 @@
-import { AINativeConfigService, IAIInlineChatService, PreferenceService } from '@opensumi/ide-core-browser';
-import { Disposable, IDisposable } from '@opensumi/ide-core-common';
+import {
+  AINativeConfigService,
+  IAIInlineChatService,
+  IContextKeyService,
+  PreferenceService,
+} from '@opensumi/ide-core-browser';
 import {
   AIInlineChatContentWidgetId,
   AINativeSettingSectionsId,
   AIServiceType,
   ActionSourceEnum,
   ActionTypeEnum,
   CancelResponse,
-  CancellationTokenSource,
   ChatResponse,
+  Disposable,
   ErrorResponse,
   Event,
   IAIReporter,
+  IDisposable,
   ILogServiceClient,
   ILogger,
   InlineChatFeatureRegistryToken,
   MaybePromise,
   runWhenIdle,
 } from '@opensumi/ide-core-common';
+import { CONTEXT_IN_DEBUG_MODE_KEY } from '@opensumi/ide-debug';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
 import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
-import { ICodeEditor } from '@opensumi/ide-monaco';
 import * as monaco from '@opensumi/ide-monaco';
+import { ICodeEditor } from '@opensumi/ide-monaco';
 import { monacoApi } from '@opensumi/ide-monaco/lib/browser/monaco-api';
 
 import { BaseAIMonacoEditorController } from '../../contrib/base';
@@ -73,6 +79,10 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
     return this.injector.get(ILogger);
   }
 
+  private get contextKeyService(): IContextKeyService {
+    return this.injector.get(IContextKeyService);
+  }
+
   private aiInlineContentWidget: AIInlineContentWidget;
   private aiInlineChatDisposable: Disposable = new Disposable();
   private aiInlineChatOperationDisposable: Disposable = new Disposable();
@@ -208,6 +218,12 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
   }
 
   protected async showInlineChat(monacoEditor: monaco.ICodeEditor): Promise<void> {
+    // 调试状态下禁用 inline chat。影响调试体验
+    const inDebugMode = this.contextKeyService.getContextValue(CONTEXT_IN_DEBUG_MODE_KEY);
+    if (inDebugMode) {
+      return;
+    }
+
     if (!this.aiNativeConfigService.capabilities.supportsInlineChat) {
       return;
     }

packages/comments/__test__/browser/comment-thread.test.ts

@@ -78,7 +78,7 @@ describe('comment service test', () => {
       },
     });
     expect(thread.data).toEqual({ a: 1 });
-    expect(thread.comments[0].data).toEqual({ b: 1 });
+    expect(thread.comments.get()[0].data).toEqual({ b: 1 });
   });
 
   it('thread add comment', () => {
@@ -100,8 +100,8 @@ describe('comment service test', () => {
         body: 'Comment Text 2',
       },
     );
-    expect(thread.comments.length).toBe(2);
-    expect(thread.comments[1].mode).toBe(CommentMode.Editor);
+    expect(thread.comments.get().length).toBe(2);
+    expect(thread.comments.get()[1].mode).toBe(CommentMode.Editor);
   });
 
   it('thread dispose', () => {
@@ -124,7 +124,7 @@ describe('comment service test', () => {
       },
     );
     thread.dispose();
-    expect(thread.comments.length).toBe(0);
+    expect(thread.comments.get().length).toBe(0);
   });
 
   it('thread context service', () => {

packages/comments/__test__/browser/comment.service.test.ts

@@ -126,7 +126,7 @@ describe('comment service test', () => {
     const [thread] = createTestThreads(uri);
     expect(thread.uri.isEqual(uri));
     expect(thread.range.startLineNumber).toBe(1);
-    expect(thread.comments[0].body).toBe('Comment Text');
+    expect(thread.comments.get()[0].body).toBe('Comment Text');
   });
 
   it('get commentsThreads', () => {

packages/comments/src/browser/comment-reactions.view.tsx

@@ -1,4 +1,3 @@
-import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { Disposable, IEventBus, getExternalIcon, useInjectable } from '@opensumi/ide-core-browser';
@@ -21,7 +20,7 @@ export const CommentReactionSwitcher: React.FC<{
   thread: ICommentsThread;
   comment: IThreadComment;
   className?: string;
-}> = observer(({ thread, comment, className }) => {
+}> = ({ thread, comment, className }) => {
   const key = `${thread.providerId}_${thread.id}_${comment.id}`;
   const menuId = `${MenuId.CommentReactionSwitcherMenu}_${key}`;
   const menuRegistry = useInjectable<IMenuRegistry>(IMenuRegistry);
@@ -68,12 +67,12 @@ export const CommentReactionSwitcher: React.FC<{
   }, []);
 
   return <InlineActionBar className={className} menus={reactionsContext} regroup={(nav) => [nav, []]} type='icon' />;
-});
+};
 
 export const CommentReactions: React.FC<{
   thread: ICommentsThread;
   comment: IThreadComment;
-}> = observer(({ thread, comment }) => {
+}> = ({ thread, comment }) => {
   const eventBus = useInjectable<IEventBus>(IEventBus);
   const iconService = useInjectable<IIconService>(IIconService);
   const handleClickReaction = React.useCallback((reaction: CommentReaction) => {
@@ -105,4 +104,4 @@ export const CommentReactions: React.FC<{
         ))}
     </div>
   );
-});
+};

packages/comments/src/browser/comments-item.view.tsx

@@ -1,4 +1,3 @@
-import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { Button } from '@opensumi/ide-components';
@@ -10,6 +9,7 @@ import {
   localize,
   toLocalString,
   toMarkdownHtml,
+  useAutorun,
   useInjectable,
 } from '@opensumi/ide-core-browser';
 import { InlineActionBar } from '@opensumi/ide-core-browser/lib/components/actions';
@@ -111,7 +111,7 @@ const useCommentContext = (
 const ReplyItem: React.FC<{
   reply: IThreadComment;
   thread: ICommentsThread;
-}> = observer(({ reply, thread }) => {
+}> = ({ reply, thread }) => {
   const { contextKeyService } = thread;
   const { author, label, body, mode, timestamp } = reply;
   const iconUrl = author.iconPath?.toString();
@@ -214,17 +214,20 @@ const ReplyItem: React.FC<{
       {reply.reactions && reply.reactions.length > 0 && <CommentReactions thread={thread} comment={reply} />}
     </div>
   );
-});
+};
 
 export const CommentItem: React.FC<{
   thread: ICommentsThread;
   commentThreadContext: IMenu;
   widget: ICommentsZoneWidget;
-}> = observer(({ thread, commentThreadContext, widget }) => {
-  const { readOnly, contextKeyService } = thread;
+}> = ({ thread, commentThreadContext, widget }) => {
   const [showReply, setShowReply] = React.useState(false);
   const [replyText, setReplyText] = React.useState('');
-  const [comment, ...replies] = thread.comments;
+
+  const { contextKeyService } = thread;
+  const readOnly = useAutorun(thread.readOnly);
+  const [comment, ...replies] = useAutorun(thread.comments);
+
   const { author, label, body, mode, timestamp } = comment;
   const iconUrl = !isString(author.iconPath)
     ? author.iconPath?.authority
@@ -364,4 +367,4 @@ export const CommentItem: React.FC<{
       </div>
     </div>
   );
-});
+};