@lobehub/chat 1.96.19 → 1.97.0

package/src/components/PublishedTime.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh.js';
+import { CSSProperties, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const LAST_MODIFIED = new Date().toISOString();
+
+const formatTime = (time?: string) => {
+  try {
+    if (!time) return LAST_MODIFIED;
+    return dayjs(time).toISOString();
+  } catch {
+    return LAST_MODIFIED;
+  }
+};
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextSecondary};
+      letter-spacing: 0.02em;
+    `,
+  };
+});
+
+interface PrivacyUpdatedProps {
+  className?: string;
+  date: string;
+  showPrefix?: boolean;
+  style?: CSSProperties;
+  template?: string;
+}
+const PublishedTime: FC<PrivacyUpdatedProps> = ({
+  date,
+  style,
+  className,
+  template = 'dddd, MMMM D YYYY',
+  showPrefix = true,
+}) => {
+  const { t, i18n } = useTranslation('discover');
+  const { styles, cx } = useStyles();
+  const time = dayjs(date).locale(i18n.language).format(template);
+
+  if (showPrefix) {
+    return (
+      <div className={cx(styles.time, className)} style={style}>
+        {t('publishedTime')}{' '}
+        <time aria-label={'published-date'} dateTime={formatTime(date)}>
+          {time}
+        </time>
+      </div>
+    );
+  } else {
+    return (
+      <time
+        aria-label={'published-date'}
+        className={cx(styles.time, className)}
+        dateTime={formatTime(date)}
+        style={style}
+      >
+        {time}
+      </time>
+    );
+  }
+};
+
+export default PublishedTime;

package/src/config/__tests__/app.test.ts

@@ -27,7 +27,9 @@ describe('getServerConfig', () => {
       expect(config.AGENTS_INDEX_URL).toBe(
         'https://registry.npmmirror.com/@lobehub/agents-index/v1/files/public',
       );
-      expect(config.PLUGINS_INDEX_URL).toBe('https://chat-plugins.lobehub.com');
+      expect(config.PLUGINS_INDEX_URL).toBe(
+        'https://registry.npmmirror.com/@lobehub/plugins-index/v1/files/public',
+      );
     });
 
     it('should return custom URLs when environment variables are set', () => {
@@ -46,7 +48,9 @@ describe('getServerConfig', () => {
       expect(config.AGENTS_INDEX_URL).toBe(
         'https://registry.npmmirror.com/@lobehub/agents-index/v1/files/public',
       );
-      expect(config.PLUGINS_INDEX_URL).toBe('https://chat-plugins.lobehub.com');
+      expect(config.PLUGINS_INDEX_URL).toBe(
+        'https://registry.npmmirror.com/@lobehub/plugins-index/v1/files/public',
+      );
     });
   });
 });

package/src/const/discover.ts

@@ -1,61 +1,35 @@
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import {
-  DiscoverAssistantItem,
-  DiscoverModelItem,
-  DiscoverPlugintem,
-  DiscoverProviderItem,
+  DiscoverAssistantDetail,
+  DiscoverModelDetail,
+  DiscoverPluginDetail,
+  DiscoverProviderDetail,
 } from '@/types/discover';
 
 const DEFAULT_CREATED_AT = new Date().toISOString();
 
-export const DEFAULT_DISCOVER_ASSISTANT_ITEM: Partial<DiscoverAssistantItem> = {
+export const DEFAULT_DISCOVER_ASSISTANT_ITEM: Partial<DiscoverAssistantDetail> = {
   author: '',
   config: DEFAULT_AGENT_CONFIG,
   createdAt: DEFAULT_CREATED_AT,
   homepage: '',
   identifier: '',
-  schemaVersion: 1,
-  socialData: {
-    conversations: 0,
-    likes: 0,
-    users: 0,
-  },
 };
 
-export const DEFAULT_DISCOVER_PLUGIN_ITEM: Partial<DiscoverPlugintem> = {
+export const DEFAULT_DISCOVER_PLUGIN_ITEM: Partial<DiscoverPluginDetail> = {
   author: '',
   createdAt: DEFAULT_CREATED_AT,
   homepage: '',
   identifier: '',
   schemaVersion: 1,
-  socialData: {
-    called: 0,
-    executionTime: 0,
-    likes: 0,
-    relatedAssistants: 0,
-    successRate: 1,
-    users: 0,
-  },
 };
 
-export const DEFAULT_DISCOVER_MODEL_ITEM: Partial<DiscoverModelItem> = {
-  createdAt: DEFAULT_CREATED_AT,
+export const DEFAULT_DISCOVER_MODEL_ITEM: Partial<DiscoverModelDetail> = {
   identifier: '',
   providers: [],
-  socialData: {
-    conversations: 0,
-    likes: 0,
-    tokens: 0,
-  },
 };
 
-export const DEFAULT_DISCOVER_PROVIDER_ITEM: Partial<DiscoverProviderItem> = {
-  createdAt: DEFAULT_CREATED_AT,
+export const DEFAULT_DISCOVER_PROVIDER_ITEM: Partial<DiscoverProviderDetail> = {
   identifier: '',
   models: [],
-  socialData: {
-    conversations: 0,
-    likes: 0,
-    users: 0,
-  },
 };

package/src/database/models/message.ts

@@ -86,6 +86,7 @@ export class MessageModel {
         createdAt: messages.createdAt,
         updatedAt: messages.updatedAt,
 
+        topicId: messages.topicId,
         parentId: messages.parentId,
         threadId: messages.threadId,
 

package/src/database/models/plugin.ts

@@ -1,6 +1,7 @@
 import { and, desc, eq } from 'drizzle-orm/expressions';
 
 import { LobeChatDatabase } from '@/database/type';
+import { LobeTool } from '@/types/tool';
 
 import { InstalledPluginItem, NewInstalledPlugin, userInstalledPlugins } from '../schemas';
 
@@ -14,11 +15,14 @@ export class PluginModel {
   }
 
   create = async (
-    params: Pick<NewInstalledPlugin, 'type' | 'identifier' | 'manifest' | 'customParams'>,
+    params: Pick<
+      NewInstalledPlugin,
+      'type' | 'identifier' | 'manifest' | 'customParams' | 'settings'
+    >,
   ) => {
     const [result] = await this.db
       .insert(userInstalledPlugins)
-      .values({ ...params, createdAt: new Date(), updatedAt: new Date(), userId: this.userId })
+      .values({ ...params, userId: this.userId })
       .onConflictDoUpdate({
         set: { ...params, updatedAt: new Date() },
         target: [userInstalledPlugins.identifier, userInstalledPlugins.userId],
@@ -41,19 +45,25 @@ export class PluginModel {
   };
 
   query = async () => {
-    return this.db
+    const data = await this.db
       .select({
         createdAt: userInstalledPlugins.createdAt,
         customParams: userInstalledPlugins.customParams,
         identifier: userInstalledPlugins.identifier,
         manifest: userInstalledPlugins.manifest,
         settings: userInstalledPlugins.settings,
+        source: userInstalledPlugins.type,
         type: userInstalledPlugins.type,
         updatedAt: userInstalledPlugins.updatedAt,
       })
       .from(userInstalledPlugins)
       .where(eq(userInstalledPlugins.userId, this.userId))
       .orderBy(desc(userInstalledPlugins.createdAt));
+
+    return data.map<LobeTool>((item) => ({
+      ...item,
+      runtimeType: item.manifest?.type || 'default',
+    }));
   };
 
   findById = async (id: string) => {

package/src/envs/app.ts

@@ -25,7 +25,7 @@ if (typeof window === 'undefined' && isServerMode && !APP_URL) {
 
 const ASSISTANT_INDEX_URL = 'https://registry.npmmirror.com/@lobehub/agents-index/v1/files/public';
 
-const PLUGINS_INDEX_URL = 'https://chat-plugins.lobehub.com';
+const PLUGINS_INDEX_URL = 'https://registry.npmmirror.com/@lobehub/plugins-index/v1/files/public';
 
 export const getAppConfig = () => {
   const ACCESS_CODES = process.env.ACCESS_CODE?.split(',').filter(Boolean) || [];

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -9,10 +9,10 @@ import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import PluginStore from '@/features/PluginStore';
-import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
-import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';

package/src/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
+import PluginTag from '@/components/Plugins/PluginTag';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
 

package/src/features/ChatInput/ActionBar/Tools/useControls.tsx

@@ -4,13 +4,13 @@ import { ArrowRight, Store, ToyBrick } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { pluginHelpers, useToolStore } from '@/store/tool';
+import { useToolStore } from '@/store/tool';
 import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 
 import ToolItem from './ToolItem';
@@ -69,8 +69,8 @@ export const useControls = ({
     },
     {
       children: list.map((item) => ({
-        icon: item.meta?.avatar ? (
-          <PluginAvatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={20} />
+        icon: item?.avatar ? (
+          <PluginAvatar avatar={item.avatar} size={20} />
         ) : (
           <Icon icon={ToyBrick} size={20} />
         ),
@@ -79,7 +79,7 @@ export const useControls = ({
           <ToolItem
             checked={checked.includes(item.identifier)}
             id={item.identifier}
-            label={pluginHelpers.getPluginTitle(item?.meta)}
+            label={item.title}
             onUpdate={async () => {
               setUpdating(true);
               await togglePlugin(item.identifier);

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/index.tsx

@@ -18,7 +18,14 @@ import Debug from './Debug';
 import Settings from './Settings';
 import ToolTitle from './ToolTitle';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const useStyles = createStyles(({ css, token, cx }) => ({
+  actions: cx(
+    'inspector-container',
+    css`
+      opacity: 0;
+      transition: opacity 300ms ease-in-out;
+    `,
+  ),
   apiName: css`
     overflow: hidden;
     display: -webkit-box;
@@ -30,6 +37,20 @@ export const useStyles = createStyles(({ css, token }) => ({
     text-overflow: ellipsis;
   `,
   container: css`
+    :hover {
+      .inspector-container {
+        opacity: 1;
+      }
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+  shinyText: shinyTextStylish(token),
+  tool: css`
     cursor: pointer;
 
     width: fit-content;
@@ -42,13 +63,6 @@ export const useStyles = createStyles(({ css, token }) => ({
       background: ${token.colorFillTertiary};
     }
   `,
-  plugin: css`
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    width: fit-content;
-  `,
-  shinyText: shinyTextStylish(token),
 }));
 
 interface InspectorProps {
@@ -87,11 +101,11 @@ const Inspectors = memo<InspectorProps>(
     const [showDebug, setShowDebug] = useState(false);
 
     return (
-      <Flexbox gap={4}>
+      <Flexbox className={styles.container} gap={4}>
         <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
           <Flexbox
             align={'center'}
-            className={styles.container}
+            className={styles.tool}
             gap={8}
             horizontal
             onClick={() => {
@@ -108,7 +122,7 @@ const Inspectors = memo<InspectorProps>(
             />
             <Icon icon={showRender ? ChevronDown : ChevronRight} />
           </Flexbox>
-          <Flexbox horizontal>
+          <Flexbox className={styles.actions} horizontal>
             {showRender && (
               <ActionIcon
                 icon={showPluginRender ? LogsIcon : LayoutPanelTop}

package/src/features/MCP/MCPInstallProgress/InstallError/ErrorDetails.tsx

@@ -0,0 +1,110 @@
+import { Highlighter, Icon } from '@lobehub/ui';
+import { Button, Tag } from 'antd';
+import { useTheme } from 'antd-style';
+import { motion } from 'framer-motion';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { MCPErrorInfoMetadata } from '@/types/plugins';
+
+const ErrorDetails = memo<{
+  errorInfo: MCPErrorInfoMetadata;
+  errorMessage?: string;
+}>(({ errorInfo, errorMessage }) => {
+  const { t } = useTranslation('plugin');
+  const [expanded, setExpanded] = useState(false);
+
+  const theme = useTheme();
+  return (
+    <Flexbox gap={8}>
+      <Button
+        color={'default'}
+        icon={<Icon icon={expanded ? ChevronDown : ChevronRight} />}
+        onClick={() => setExpanded(!expanded)}
+        size="small"
+        style={{
+          fontSize: '12px',
+          padding: '0 4px',
+        }}
+        variant="filled"
+      >
+        {expanded
+          ? t('mcpInstall.errorDetails.hideDetails')
+          : t('mcpInstall.errorDetails.showDetails')}
+      </Button>
+
+      {expanded && (
+        <motion.div
+          animate={{ height: 'auto', opacity: 1 }}
+          initial={{ height: 0, opacity: 0 }}
+          style={{ overflow: 'hidden' }}
+        >
+          <Flexbox
+            gap={8}
+            style={{
+              backgroundColor: theme.colorFillQuaternary,
+              borderRadius: 8,
+              fontFamily: 'monospace',
+              fontSize: '11px',
+              padding: '8px 12px',
+            }}
+          >
+            {errorInfo.params && (
+              <Flexbox gap={4}>
+                <div>
+                  <Tag bordered={false} color="blue">
+                    {t('mcpInstall.errorDetails.connectionParams')}
+                  </Tag>
+                </div>
+                <div style={{ marginTop: 4, wordBreak: 'break-all' }}>
+                  {errorInfo.params.command && (
+                    <div>
+                      {t('mcpInstall.errorDetails.command')}: {errorInfo.params.command}
+                    </div>
+                  )}
+                  {errorInfo.params.args && (
+                    <div>
+                      {t('mcpInstall.errorDetails.args')}: {errorInfo.params.args.join(' ')}
+                    </div>
+                  )}
+                </div>
+              </Flexbox>
+            )}
+
+            {errorInfo.errorLog && (
+              <Flexbox gap={4}>
+                <div>
+                  <Tag bordered={false} color="red">
+                    {t('mcpInstall.errorDetails.errorOutput')}
+                  </Tag>
+                </div>
+                <Highlighter
+                  language={'log'}
+                  style={{
+                    maxHeight: 200,
+                    overflow: 'auto',
+                  }}
+                >
+                  {errorInfo.errorLog}
+                </Highlighter>
+              </Flexbox>
+            )}
+
+            {errorInfo.originalError && errorInfo.originalError !== errorMessage && (
+              <div>
+                <Tag color="orange">{t('mcpInstall.errorDetails.originalError')}</Tag>
+                <div style={{ marginTop: 4, wordBreak: 'break-all' }}>
+                  {errorInfo.originalError}
+                </div>
+              </div>
+            )}
+          </Flexbox>
+        </motion.div>
+      )}
+    </Flexbox>
+  );
+});
+
+export default ErrorDetails;

package/src/features/MCP/MCPInstallProgress/InstallError/index.tsx

@@ -0,0 +1,51 @@
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { MCPErrorInfo } from '@/types/plugins';
+
+import ErrorDetails from './ErrorDetails';
+
+interface InstallErrorProps {
+  errorInfo: MCPErrorInfo;
+  identifier: string;
+}
+
+const InstallError = memo<InstallErrorProps>(({ errorInfo, identifier }) => {
+  const { t } = useTranslation(['plugin', 'common']);
+
+  const cancelInstallMCPPlugin = useToolStore((s) => s.cancelInstallMCPPlugin);
+
+  return (
+    <Flexbox gap={8}>
+      <Alert
+        action={
+          <Flexbox>
+            <Button
+              color={'default'}
+              onClick={() => {
+                cancelInstallMCPPlugin(identifier);
+              }}
+              size={'small'}
+              variant={'filled'}
+            >
+              {t('common:close')}
+            </Button>
+          </Flexbox>
+        }
+        message={t('mcpInstall.installError', {
+          detail: t(`mcpInstall.errorTypes.${errorInfo.type}`),
+        })}
+        type="error"
+        variant={'borderless'}
+      />
+      {errorInfo.metadata && (
+        <ErrorDetails errorInfo={errorInfo.metadata} errorMessage={errorInfo.message} />
+      )}
+    </Flexbox>
+  );
+});
+export default InstallError;

package/src/features/MCP/MCPInstallProgress/MCPConfigForm.tsx

@@ -0,0 +1,151 @@
+import { Form, Markdown } from '@lobehub/ui';
+import { Form as AForm, Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { motion } from 'framer-motion';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ItemRender from '@/components/JSONSchemaConfig/ItemRender';
+import { transformPluginSettings } from '@/features/PluginSettings';
+import { useToolStore } from '@/store/tool';
+
+interface MCPConfigFormProps {
+  configSchema: any;
+  identifier: string;
+  onCancel?: () => void;
+  onSubmit?: (config: Record<string, any>) => Promise<void>;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    margin-block-start: ${token.marginXS}px;
+    padding: ${token.padding}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadius}px;
+
+    background-color: ${token.colorBgContainer};
+  `,
+  footer: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    justify-content: flex-end;
+
+    margin-block-start: ${token.margin}px;
+    padding-block-start: ${token.paddingXS}px;
+    border-block-start: 1px solid ${token.colorBorderSecondary};
+  `,
+  markdown: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
+}));
+
+const MCPConfigForm = memo<MCPConfigFormProps>(({ configSchema, identifier, onCancel }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['plugin', 'common']);
+  const [form] = AForm.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const { installMCPPlugin } = useToolStore();
+
+  const items = transformPluginSettings(configSchema);
+
+  const handleSubmit = async (values: Record<string, any>) => {
+    setLoading(true);
+    try {
+      await installMCPPlugin(identifier, { config: values, resume: true });
+    } catch (error) {
+      console.error('Config submission failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      // 默认行为：清理安装进度
+      useToolStore.getState().updateMCPInstallProgress(identifier, undefined);
+    }
+  };
+
+  return (
+    <motion.div
+      animate={{ y: 0 }}
+      className={styles.container}
+      initial={{ y: 8 }}
+      transition={{ delay: 0.1, duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+    >
+      <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: 4 }}
+        transition={{ delay: 0.15, duration: 0.2 }}
+      >
+        <Flexbox gap={8}>
+          <strong>{t('mcpInstall.configurationRequired')}</strong>
+          <span style={{ fontSize: 12, opacity: 0.7 }}>
+            {t('mcpInstall.configurationDescription')}
+          </span>
+        </Flexbox>
+      </motion.div>
+
+      <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: 4 }}
+        transition={{ delay: 0.2, duration: 0.2 }}
+      >
+        <Form
+          form={form}
+          gap={12}
+          items={items
+            .filter((item) => configSchema.required?.includes(item.name))
+            .map((item) => ({
+              children: (
+                <ItemRender
+                  enum={item.enum}
+                  format={item.format}
+                  maximum={item.maximum}
+                  minimum={item.minimum}
+                  type={item.type as any}
+                />
+              ),
+              desc: item.desc && (
+                <Markdown className={styles.markdown} variant={'chat'}>
+                  {item.desc as string}
+                </Markdown>
+              ),
+              key: item.label,
+              label: item.label,
+              name: item.name,
+              rules: [{ required: true }],
+              tag: item.tag,
+              valuePropName: item.type === 'boolean' ? 'checked' : undefined,
+            }))}
+          itemsType={'flat'}
+          layout={'vertical'}
+          onFinish={handleSubmit}
+          variant={'borderless'}
+        />
+      </motion.div>
+
+      <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        className={styles.footer}
+        initial={{ opacity: 0, y: 4 }}
+        transition={{ delay: 0.25, duration: 0.2 }}
+      >
+        <Button onClick={handleCancel} size="small">
+          {t('common:cancel')}
+        </Button>
+        <Button loading={loading} onClick={() => form.submit()} size="small" type="primary">
+          {t('mcpInstall.continueInstall')}
+        </Button>
+      </motion.div>
+    </motion.div>
+  );
+});
+
+export default MCPConfigForm;