@lobehub/chat 1.1.15 → 1.1.17

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.1.17](https://github.com/lobehub/lobe-chat/compare/v1.1.16...v1.1.17)
+
+<sup>Released on **2024-07-01**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor to prepare for Chat Portal.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor to prepare for Chat Portal, closes [#3093](https://github.com/lobehub/lobe-chat/issues/3093) ([e7c1ba8](https://github.com/lobehub/lobe-chat/commit/e7c1ba8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.1.16](https://github.com/lobehub/lobe-chat/compare/v1.1.15...v1.1.16)
+
+<sup>Released on **2024-06-29**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix clerk `UNAUTHORIZED` error after long-time hang-up.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix clerk `UNAUTHORIZED` error after long-time hang-up, closes [#3084](https://github.com/lobehub/lobe-chat/issues/3084) ([a148c3b](https://github.com/lobehub/lobe-chat/commit/a148c3b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.1.15](https://github.com/lobehub/lobe-chat/compare/v1.1.14...v1.1.15)
 
 <sup>Released on **2024-06-28**</sup>

package/docs/self-hosting/examples/ollama.mdx

@@ -27,7 +27,7 @@ First, you need to install Ollama. For detailed steps on installing and configur
 Assuming you have already started the Ollama service locally on port `11434`. Run the following Docker command to start LobeChat locally:
 
 ```bash
-docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat
+docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434 lobehub/lobe-chat
 ```
 
 Now, you can use LobeChat to converse with the local LLM.

package/docs/self-hosting/examples/ollama.zh-CN.mdx

@@ -25,7 +25,7 @@ Ollama 是一款强大的本地运行大型语言模型（LLM）的框架，支
 假设你已经在本地 `11434` 端口启动了 Ollama 服务。运行以下 Docker 命令行，在本地启动 LobeChat：
 
 ```bash
-docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat
+docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434 lobehub/lobe-chat
 ```
 
 接下来，你就可以使用 LobeChat 与本地 LLM 对话了。

package/locales/ar/plugin.json

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

package/locales/ar/portal.json

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

package/locales/bg-BG/plugin.json

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

package/locales/bg-BG/portal.json

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

package/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.",

package/locales/de-DE/portal.json

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

package/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.",

package/locales/en-US/portal.json

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

package/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.",

package/locales/es-ES/portal.json

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

package/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.",

package/locales/fr-FR/portal.json

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

package/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",

package/locales/it-IT/portal.json

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

package/locales/ja-JP/plugin.json

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

package/locales/ja-JP/portal.json

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

package/locales/ko-KR/plugin.json

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

package/locales/ko-KR/portal.json

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

package/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?",

package/locales/nl-NL/portal.json

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

package/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.",

package/locales/pl-PL/portal.json

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

package/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.",

package/locales/pt-BR/portal.json

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

package/locales/ru-RU/plugin.json

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

package/locales/ru-RU/portal.json

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

package/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",

package/locales/tr-TR/portal.json

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

package/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",

package/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"
+}

package/locales/zh-CN/plugin.json

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

package/locales/zh-CN/portal.json

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

package/locales/zh-TW/plugin.json

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

package/locales/zh-TW/portal.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/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;

package/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;

package/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;

package/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;

package/src/app/(main)/chat/(workspace)/@portal/features/Tools/ToolList/Item/index.tsx

@@ -0,0 +1,74 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { CircuitBoard } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginAvatar from '@/features/PluginAvatar';
+import { useYamlArguments } from '@/hooks/useYamlArguments';
+import { useChatStore } from '@/store/chat';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { toolSelectors } from '@/store/tool/selectors';
+import { ChatPluginPayload } from '@/types/message';
+
+import { useStyles } from './style';
+
+export interface InspectorProps {
+  identifier?: string;
+  messageId: string;
+  payload?: ChatPluginPayload;
+}
+
+const Inspector = memo<InspectorProps>(({ payload, messageId, identifier = 'unknown' }) => {
+  const { t } = useTranslation('plugin');
+  const { styles, cx } = useStyles();
+
+  const args = useYamlArguments(payload?.arguments);
+
+  const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
+  const isToolHasUI = useToolStore(toolSelectors.isToolHasUI(identifier));
+  const openToolUI = useChatStore((s) => s.openToolUI);
+  const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={styles.container}
+      gap={8}
+      horizontal
+      onClick={() => {
+        if (!isToolHasUI || !identifier) return;
+
+        openToolUI(messageId, identifier);
+      }}
+    >
+      <Flexbox align={'center'} distribution={'space-between'} gap={24} horizontal>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <PluginAvatar identifier={identifier} />
+          <Flexbox gap={4}>
+            <Flexbox align={'center'} gap={8} horizontal>
+              <div>{pluginTitle}</div>
+              <Tag>{payload?.apiName}</Tag>
+            </Flexbox>
+            <div>
+              <Typography.Text ellipsis style={{ fontSize: 12 }} type={'secondary'}>
+                {args}
+              </Typography.Text>
+            </div>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox>
+          {isToolHasUI && (
+            <div className={cx(styles.tag, styles.tagBlue)} style={{ cursor: 'pointer' }} title="">
+              <Icon icon={CircuitBoard} />
+            </div>
+          )}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Inspector;

package/src/app/(main)/chat/(workspace)/@portal/features/Tools/ToolList/Item/style.ts

@@ -0,0 +1,46 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    width: 100%;
+    padding: 10px 8px;
+    padding-inline-end: 12px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorBgContainer};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+  tag: css`
+    cursor: default;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+
+    border-radius: 4px;
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+}));

package/src/app/(main)/chat/(workspace)/@portal/features/Tools/ToolList/index.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import ToolItem from './Item';
+
+const ToolList = () => {
+  const messages = useChatStore(chatSelectors.currentToolMessages, isEqual);
+  const isCurrentChatLoaded = useChatStore(chatSelectors.isCurrentChatLoaded);
+
+  return !isCurrentChatLoaded ? (
+    <Flexbox gap={12} paddingInline={12}>
+      {[1, 1, 1, 1, 1, 1].map((key, index) => (
+        <Skeleton.Button
+          active
+          block
+          key={`${key}-${index}`}
+          style={{ borderRadius: 8, height: 68 }}
+        />
+      ))}
+    </Flexbox>
+  ) : (
+    <Flexbox gap={12} paddingInline={12}>
+      {messages.map((m) => (
+        <ToolItem
+          identifier={m.plugin?.identifier}
+          key={m.id}
+          messageId={m.id}
+          payload={m.plugin}
+        />
+      ))}
+    </Flexbox>
+  );
+};
+
+export default ToolList;