♻️ refactor: refactor to prepare for Chat Portal (lobehub#3093)

* ✨ feat: add dock

* ♻️ refactor: add plugin render

* ✅ test: add tests

* ✅ test: add tests

* ✅ test: add tests

* ♻️ refactor: refactor and add tests

* ✅ test: fix tests

* ✅ test: fix tests

* move files

* refactor

* 🌐 chore: add locale

locales/ar/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "بعد ضبط عنوان سوق الإضافات، يمكن استخدام سوق الإضافات المخصص",
     "title": "ضبط سوق الإضافات"
   },
+  "showInPortal": "يرجى الاطلاع على التفاصيل في النافذة المنبثقة",
   "store": {
     "actions": {
       "confirmUninstall": "سيتم إلغاء تثبيت الإضافة، وسيتم مسح تكوين الإضافة، يرجى تأكيد العملية",

locales/ar/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "تلخيص من قبل المساعد",
+  "title": "نافذة موسعة"
+}

locales/bg-BG/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "След като конфигурирате адреса на пазара на плъгини, можете да използвате персонализиран пазар на плъгини",
     "title": "Конфигуриране на пазара на плъгини"
   },
+  "showInPortal": "Моля, вижте подробностите в разширеното прозорец",
   "store": {
     "actions": {
       "confirmUninstall": "Плъгинът е на път да бъде деинсталиран. След деинсталирането конфигурацията на плъгина ще бъде изчистена. Моля, потвърдете операцията си.",

locales/bg-BG/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Сумиране от помощник",
+  "title": "Разширено прозорец"
+}

locales/de-DE/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Nachdem Sie die Adresse des Plugin-Marktes konfiguriert haben, können Sie den benutzerdefinierten Plugin-Markt verwenden.",
     "title": "Plugin-Markteinstellungen"
   },
+  "showInPortal": "Bitte überprüfen Sie die Details im Erweiterungsfenster",
   "store": {
     "actions": {
       "confirmUninstall": "Das Plugin wird deinstalliert und alle Konfigurationen werden gelöscht. Bitte bestätigen Sie Ihre Aktion.",

locales/de-DE/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Lassen Sie den Assistenten zusammenfassen",
+  "title": "Erweiterungsfenster"
+}

locales/en-US/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "After configuring the address of the plugin marketplace, you can use a custom plugin marketplace",
     "title": "Configure Plugin Marketplace"
   },
+  "showInPortal": "Please view details in the extension window",
   "store": {
     "actions": {
       "confirmUninstall": "The plugin is about to be uninstalled. After uninstalling, the plugin configuration will be cleared. Please confirm your operation.",

locales/en-US/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Let the assistant summarize",
+  "title": "Expand Window"
+}

locales/es-ES/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Después de configurar la dirección del mercado de complementos, puede utilizar un mercado personalizado de complementos.",
     "title": "Configuración del mercado de complementos"
   },
+  "showInPortal": "Por favor, consulta los detalles en la ventana de expansión",
   "store": {
     "actions": {
       "confirmUninstall": "Está a punto de desinstalar este complemento. Se eliminará la configuración del complemento. Confirme su acción.",

locales/es-ES/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Resumen del asistente",
+  "title": "Ventana de expansión"
+}

locales/fr-FR/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Une fois l'adresse du marché des plugins configurée, vous pourrez utiliser un marché de plugins personnalisé.",
     "title": "Paramètres du marché des plugins"
   },
+  "showInPortal": "Veuillez consulter les détails dans la fenêtre d'extension",
   "store": {
     "actions": {
       "confirmUninstall": "Vous êtes sur le point de désinstaller ce plugin. Une fois désinstallé, sa configuration sera effacée. Veuillez confirmer votre action.",

locales/fr-FR/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Faire un résumé avec l'assistant",
+  "title": "Fenêtre d'extension"
+}

locales/it-IT/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Dopo aver configurato l'indirizzo del mercato dei plugin, è possibile utilizzare un mercato dei plugin personalizzato",
     "title": "Impostazioni del mercato dei plugin"
   },
+  "showInPortal": "Si prega di visualizzare i dettagli nella finestra di estensione",
   "store": {
     "actions": {
       "confirmUninstall": "Stai per disinstallare questo plugin. La disinstallazione cancellerà la configurazione del plugin. Conferma l'operazione",

locales/it-IT/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Riepilogo assistente",
+  "title": "Finestra di espansione"
+}

locales/ja-JP/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "プラグインマーケットのアドレスを設定すると、カスタムのプラグインマーケットを使用できます",
     "title": "プラグインマーケットの設定"
   },
+  "showInPortal": "詳細は拡張ウィンドウで表示してください",
   "store": {
     "actions": {
       "confirmUninstall": "このプラグインをアンインストールします。アンインストール後、プラグインの設定がクリアされます。操作を確認してください。",

locales/ja-JP/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "アシスタントに要約させる",
+  "title": "拡張ウィンドウ"
+}

locales/ko-KR/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "플러그인 마켓의 주소를 구성하면 사용자 정의 플러그인 마켓을 사용할 수 있습니다.",
     "title": "플러그인 마켓 설정"
   },
+  "showInPortal": "확장 창에서 자세히 보기",
   "store": {
     "actions": {
       "confirmUninstall": "이 플러그인을 제거하려고 합니다. 제거하면 플러그인 구성이 지워지므로 작업을 확인하세요.",

locales/ko-KR/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "어시스턴트 요약",
+  "title": "확장 창"
+}

locales/nl-NL/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Na het instellen van de marktlocatie voor plugins, kunt u een aangepaste pluginmarkt gebruiken.",
     "title": "Instellingen voor pluginmarkt"
   },
+  "showInPortal": "Gelieve de details te bekijken in het uitbreidingsvenster",
   "store": {
     "actions": {
       "confirmUninstall": "Deze plugin wordt binnenkort verwijderd. Na verwijdering worden de configuraties gewist. Weet u zeker dat u door wilt gaan?",

locales/nl-NL/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Laat de assistent samenvatten",
+  "title": "Uitbreidingsvenster"
+}

locales/pl-PL/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Po skonfigurowaniu adresu sklepu wtyczek możesz korzystać z niestandardowego sklepu wtyczek",
     "title": "Skonfiguruj sklep wtyczek"
   },
+  "showInPortal": "Proszę sprawdzić szczegóły w oknie rozszerzenia",
   "store": {
     "actions": {
       "confirmUninstall": "Wtyczka zostanie odinstalowana. Po odinstalowaniu konfiguracja wtyczki zostanie wyczyszczona. Potwierdź swoje działanie.",

locales/pl-PL/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Podsumowanie przez asystenta",
+  "title": "Okno rozszerzenia"
+}

locales/pt-BR/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Após configurar o endereço do mercado de plugins, você poderá usar um mercado personalizado de plugins.",
     "title": "Configurações do Mercado de Plugins"
   },
+  "showInPortal": "Por favor, veja os detalhes na janela de extensão",
   "store": {
     "actions": {
       "confirmUninstall": "Você está prestes a desinstalar este plugin. A desinstalação irá limpar a configuração do plugin. Confirme a operação.",

locales/pt-BR/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Permita que o assistente resuma",
+  "title": "Janela de Expansão"
+}

locales/ru-RU/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "После настройки адреса магазина плагинов можно использовать пользовательский магазин",
     "title": "Настройки магазина плагинов"
   },
+  "showInPortal": "Просмотрите подробности во всплывающем окне",
   "store": {
     "actions": {
       "confirmUninstall": "Вы собираетесь удалить этот плагин. После удаления его настройки будут утрачены. Вы уверены, что хотите продолжить?",

locales/ru-RU/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Попросите помощника сделать сводку",
+  "title": "Расширенное окно"
+}

locales/tr-TR/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Eklenti pazarı adresini yapılandırdıktan sonra, özel bir eklenti pazarı kullanabilirsiniz.",
     "title": "Eklenti Pazarı Ayarla"
   },
+  "showInPortal": "Detayları genişletme penceresinde görüntüleyin",
   "store": {
     "actions": {
       "confirmUninstall": "Bu eklentiyi kaldırmak üzeresiniz, kaldırdıktan sonra eklenti yapılandırması temizlenecektir, işleminizi onaylayın",

locales/tr-TR/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Asistanın özetlemesine izin ver",
+  "title": "Genişletme Penceresi"
+}

locales/vi-VN/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "Sau khi cấu hình địa chỉ thị trường plugin, bạn có thể sử dụng thị trường plugin tùy chỉnh",
     "title": "Cài đặt thị trường plugin"
   },
+  "showInPortal": "Vui lòng xem chi tiết trong cửa sổ mở rộng",
   "store": {
     "actions": {
       "confirmUninstall": "Sắp gỡ bỏ plugin này, sau khi gỡ bỏ sẽ xóa cấu hình của plugin này, vui lòng xác nhận hành động của bạn",

locales/vi-VN/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "Tóm tắt bởi trợ lý",
+  "title": "Cửa sổ mở rộng"
+}

locales/zh-CN/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "配置插件市场的地址后，可以使用自定义的插件市场",
     "title": "设置插件市场"
   },
+  "showInPortal": "请在扩展窗中查看详情",
   "store": {
     "actions": {
       "confirmUninstall": "即将卸载该插件，卸载后将清除该插件配置，请确认你的操作",

locales/zh-CN/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "让助手总结",
+  "title": "扩展窗"
+}

locales/zh-TW/plugin.json

@@ -139,6 +139,7 @@
     "modalDesc": "設定外掛市集的網址後，您可以使用自訂的外掛市集",
     "title": "設定外掛市集"
   },
+  "showInPortal": "請在入口網站中查看",
   "store": {
     "actions": {
       "confirmUninstall": "即將卸載該插件，卸載後將清除該插件配置，請確認你的操作",

locales/zh-TW/portal.json

@@ -0,0 +1,4 @@
+{
+  "aiSummary": "讓助手總結",
+  "title": "擴展視窗"
+}

src/app/(main)/chat/(workspace)/@portal/_layout/Desktop.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '../features/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Header />
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        {children}
+      </Flexbox>
+    </>
+  );
+};
+
+export default Layout;

src/app/(main)/chat/(workspace)/@portal/_layout/Mobile.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Flexbox gap={8} height={'100%'} padding={'8px 8px 0'} style={{ overflow: 'hidden' }}>
+      <Flexbox
+        height={'100%'}
+        style={{ marginInline: -8, overflow: 'hidden', position: 'relative' }}
+        width={'calc(100% + 16px)'}
+      >
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Layout;

src/app/(main)/chat/(workspace)/@portal/default.tsx

@@ -0,0 +1,27 @@
+import React, { Suspense, lazy } from 'react';
+
+import Loading from '@/components/CircleLoading';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const InspectorContent = lazy(() => import('./index'));
+
+const Inspector = () => {
+  const mobile = isMobileDevice();
+
+  const Layout = mobile ? Mobile : Desktop;
+
+  return (
+    <Layout>
+      <Suspense fallback={<Loading />}>
+        <InspectorContent />
+      </Suspense>
+    </Layout>
+  );
+};
+
+Inspector.displayName = 'ChatInspector';
+
+export default Inspector;

src/app/(main)/chat/(workspace)/@portal/features/Header.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ArrowLeft, XIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SidebarHeader from '@/components/SidebarHeader';
+import PluginAvatar from '@/features/PluginAvatar';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { toolSelectors } from '@/store/tool/selectors';
+
+const Header = memo(() => {
+  const [showToolUI, toggleInspector, closeToolUI, toolUIIdentifier = ''] = useChatStore((s) => [
+    chatPortalSelectors.showToolUI(s),
+    s.toggleDock,
+    s.closeToolUI,
+    chatPortalSelectors.toolUIIdentifier(s),
+  ]);
+
+  const { t } = useTranslation(['plugin', 'portal']);
+  const pluginMeta = useToolStore(toolSelectors.getMetaById(toolUIIdentifier), isEqual);
+  const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
+
+  return (
+    <SidebarHeader
+      actions={<ActionIcon icon={XIcon} onClick={() => toggleInspector(false)} />}
+      title={
+        showToolUI ? (
+          <Flexbox align={'center'} gap={4} horizontal>
+            <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />
+            <PluginAvatar identifier={toolUIIdentifier} size={28} />
+            <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
+              {pluginTitle}
+            </Typography.Text>
+          </Flexbox>
+        ) : (
+          <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
+            {t('portal:title')}
+          </Typography.Text>
+        )
+      }
+    />
+  );
+});
+
+export default Header;