@lobehub/chat 1.98.2 → 1.99.0

package/src/features/ImageSidePanel/index.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PanelTitle from '@/components/PanelTitle';
+import { FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  panel: css`
+    height: 100%;
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const ImageSidePanel = memo<PropsWithChildren>(({ children }) => {
+  const { md = true } = useResponsive();
+  const { t } = useTranslation('image');
+  const { styles } = useStyles();
+  const [imagePanelWidth, showImagePanel, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.imagePanelWidth(s),
+    systemStatusSelectors.showImagePanel(s),
+    s.updateSystemStatus,
+  ]);
+
+  const [tmpWidth, setWidth] = useState(imagePanelWidth);
+  if (tmpWidth !== imagePanelWidth) setWidth(imagePanelWidth);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showImagePanel));
+
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, showImagePanel)) return;
+    updateSystemStatus({ showImagePanel: expand });
+    setCacheExpand(expand);
+  };
+  useEffect(() => {
+    if (md && cacheExpand) updateSystemStatus({ showImagePanel: true });
+    if (!md) updateSystemStatus({ showImagePanel: false });
+  }, [md, cacheExpand]);
+
+  const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
+    if (!size) return;
+    const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+    if (!nextWidth) return;
+
+    if (isEqual(nextWidth, imagePanelWidth)) return;
+    setWidth(nextWidth);
+    updateSystemStatus({ imagePanelWidth: nextWidth });
+  };
+
+  return (
+    <DraggablePanel
+      className={styles.panel}
+      defaultSize={{ width: tmpWidth }}
+      expand={showImagePanel}
+      maxWidth={320}
+      minWidth={FOLDER_WIDTH}
+      mode={md ? 'fixed' : 'float'}
+      onExpandChange={handleExpand}
+      onSizeChange={handleSizeChange}
+      placement="left"
+      size={{ height: '100%', width: imagePanelWidth }}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          minWidth: FOLDER_WIDTH,
+          zIndex: 10,
+        }}
+      >
+        <PanelTitle desc={t('config.header.desc')} title={t('config.header.title')} />
+        {children}
+      </DraggablePanelContainer>
+    </DraggablePanel>
+  );
+});
+
+export default ImageSidePanel;

package/src/features/ImageTopicPanel/index.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  panel: css`
+    height: 100%;
+    background: ${token.colorBgContainerSecondary};
+  `,
+}));
+
+const ImageTopicPanel = memo<PropsWithChildren>(({ children }) => {
+  const { md = true } = useResponsive();
+
+  const { styles } = useStyles();
+  const [imageTopicPanelWidth, showImageTopicPanel, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.imageTopicPanelWidth(s),
+    systemStatusSelectors.showImageTopicPanel(s),
+    s.updateSystemStatus,
+  ]);
+
+  const [tmpWidth, setWidth] = useState(imageTopicPanelWidth);
+  if (tmpWidth !== imageTopicPanelWidth) setWidth(imageTopicPanelWidth);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showImageTopicPanel));
+
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, showImageTopicPanel)) return;
+    updateSystemStatus({ showImageTopicPanel: expand });
+    setCacheExpand(expand);
+  };
+  useEffect(() => {
+    if (md && cacheExpand) updateSystemStatus({ showImageTopicPanel: true });
+    if (!md) updateSystemStatus({ showImageTopicPanel: false });
+  }, [md, cacheExpand]);
+
+  const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
+    if (!size) return;
+    const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+    if (!nextWidth) return;
+
+    if (isEqual(nextWidth, imageTopicPanelWidth)) return;
+    setWidth(nextWidth);
+    updateSystemStatus({ imageTopicPanelWidth: nextWidth });
+  };
+
+  return (
+    <DraggablePanel
+      className={styles.panel}
+      defaultSize={{ width: tmpWidth }}
+      expand={showImageTopicPanel}
+      maxWidth={320}
+      minWidth={80}
+      mode={md ? 'fixed' : 'float'}
+      onExpandChange={handleExpand}
+      onSizeChange={handleSizeChange}
+      placement="right"
+      size={{ height: '100%', width: imageTopicPanelWidth }}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          minWidth: 80,
+          padding: 16,
+        }}
+      >
+        {children}
+      </DraggablePanelContainer>
+    </DraggablePanel>
+  );
+});
+
+export default ImageTopicPanel;

package/src/features/PluginDevModal/MCPManifestForm/CollapsibleSection.tsx

@@ -0,0 +1,62 @@
+import { createStyles } from 'antd-style';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    margin-block-end: ${token.marginLG}px;
+  `,
+
+  header: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+
+    border-radius: ${token.borderRadius}px;
+
+    color: ${token.colorTextTertiary};
+
+    transition: all ${token.motionDurationMid} ease;
+
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
+
+  title: css`
+    margin-inline-start: 4px;
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorText};
+  `,
+}));
+
+interface CollapsibleSectionProps {
+  /** 子组件内容 */
+  children: ReactNode;
+  /** 默认是否展开 */
+  defaultExpanded?: boolean;
+  /** 标题文本 */
+  title: string;
+}
+
+const CollapsibleSection = ({
+  title,
+  children,
+  defaultExpanded = false,
+}: CollapsibleSectionProps) => {
+  const { styles, cx } = useStyles();
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className={styles.container}>
+      <div className={cx(styles.header)} onClick={() => setIsExpanded(!isExpanded)}>
+        {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+        <span className={styles.title}>{title}</span>
+      </div>
+      {isExpanded && <div>{children}</div>}
+    </div>
+  );
+};
+
+export default CollapsibleSection;

package/src/features/PluginDevModal/MCPManifestForm/QuickImportSection.tsx

@@ -0,0 +1,158 @@
+import { Alert, TextArea } from '@lobehub/ui';
+import { Button, FormInstance } from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { isDesktop } from '@/const/version';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { electronStylish } from '@/styles/electron';
+
+import { parseMcpInput } from './utils';
+
+interface QuickImportSectionProps {
+  form: FormInstance;
+  isEditMode?: boolean;
+  onClearConnectionError?: () => void;
+}
+
+const QuickImportSection = ({
+  form,
+  isEditMode,
+  onClearConnectionError,
+}: QuickImportSectionProps) => {
+  const { t } = useTranslation(['plugin', 'common']);
+  const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
+  const [isImportModalVisible, setIsImportModalVisible] = useState(false);
+  const [jsonInput, setJsonInput] = useState('');
+  const [importError, setImportError] = useState<string | null>(null);
+
+  const handleImportConfirm = () => {
+    setImportError(null); // Clear previous import error
+    onClearConnectionError?.(); // Clear connection error
+
+    const value = jsonInput.trim(); // Use the text area input
+    if (!value) {
+      setImportError(t('dev.mcp.quickImportError.empty'));
+      return;
+    }
+
+    // Use the existing parseMcpInput function
+    const parseResult = parseMcpInput(value);
+
+    // Handle parsing errors from parseMcpInput
+    if (parseResult.status === 'error') {
+      // Assuming parseMcpInput returns an error message or code in parseResult
+      // We might need a more specific error message based on parseResult.error
+      setImportError(parseResult.errorCode);
+      return;
+    }
+
+    if (parseResult.status === 'noop') {
+      setImportError(t('dev.mcp.quickImportError.invalidJson'));
+      return;
+    }
+
+    // Extract identifier and mcpConfig from the successful parse result
+    const { identifier, mcpConfig } = parseResult;
+
+    // Check for desktop requirement for stdio
+    if (!isDesktop && mcpConfig.type === 'stdio') {
+      setImportError(t('dev.mcp.stdioNotSupported'));
+      return;
+    }
+
+    // Check for duplicate identifier (only in create mode)
+    if (!isEditMode && pluginIds.includes(identifier)) {
+      // Update form fields even if duplicate, so user sees the pasted values
+      form.setFieldsValue({
+        customParams: { mcp: mcpConfig },
+        identifier: identifier,
+      });
+      // Trigger validation to show Form.Item error
+      form.validateFields(['identifier']);
+      setIsImportModalVisible(false); // Close modal even on duplicate error
+      setJsonInput(''); // Clear modal input
+      return;
+    }
+
+    // All checks passed, fill the form
+    form.setFieldsValue({
+      customParams: { mcp: mcpConfig },
+      identifier: identifier,
+    });
+
+    // Clear potential old validation error on identifier field
+    form.setFields([{ errors: [], name: 'identifier' }]);
+
+    // Clear modal state and close (or rather, hide the import UI)
+    setIsImportModalVisible(false);
+    // setJsonInput(''); // Keep input for potential edits?
+    setImportError(null);
+  };
+
+  if (!isImportModalVisible) {
+    return (
+      <div>
+        <Button
+          block // Make button full width
+          onClick={() => {
+            setImportError(null); // Clear previous errors when opening
+            setIsImportModalVisible(true);
+          }}
+          style={{ marginBottom: 16 }} // Add some spacing
+          type="dashed"
+        >
+          {t('dev.mcp.quickImport')}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <Flexbox gap={8}>
+      {importError && (
+        <Alert message={importError} showIcon style={{ marginBottom: 8 }} type="error" />
+      )}
+      <TextArea
+        autoSize={{ maxRows: 15, minRows: 10 }}
+        onChange={(e) => {
+          setJsonInput(e.target.value);
+          if (importError) setImportError(null);
+        }}
+        placeholder={`{
+  "mcpServers": {
+    "github": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-github"
+      ],
+      "env": {
+        "GITHUB_PERSONAL_ACCESS_TOKEN": "<your-api-key>"
+      }
+    }
+  }
+}`}
+        value={jsonInput}
+      />
+      <Flexbox horizontal justify={'space-between'}>
+        <Button
+          className={electronStylish.nodrag}
+          onClick={() => {
+            setIsImportModalVisible(false);
+          }}
+          size={'small'}
+        >
+          {t('common:cancel')}
+        </Button>
+        <Button onClick={handleImportConfirm} size={'small'} type={'primary'}>
+          {t('common:import')}
+        </Button>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default QuickImportSection;