@lobehub/chat 1.104.5 → 1.105.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.105.1](https://github.com/lobehub/lobe-chat/compare/v1.105.0...v1.105.1)
+
+<sup>Released on **2025-07-29**</sup>
+
+#### 💄 Styles
+
+- **misc**: Support more Text2Image from Qwen.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Support more Text2Image from Qwen, closes [#8574](https://github.com/lobehub/lobe-chat/issues/8574) ([b8c0e2d](https://github.com/lobehub/lobe-chat/commit/b8c0e2d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 1.105.0](https://github.com/lobehub/lobe-chat/compare/v1.104.5...v1.105.0)
+
+<sup>Released on **2025-07-28**</sup>
+
+#### ✨ Features
+
+- **misc**: Implement API Key management functionality.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Implement API Key management functionality, closes [#8535](https://github.com/lobehub/lobe-chat/issues/8535) ([fdaa725](https://github.com/lobehub/lobe-chat/commit/fdaa725))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.104.5](https://github.com/lobehub/lobe-chat/compare/v1.104.4...v1.104.5)
 
 <sup>Released on **2025-07-28**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Support more Text2Image from Qwen."
+      ]
+    },
+    "date": "2025-07-29",
+    "version": "1.105.1"
+  },
+  {
+    "children": {
+      "features": [
+        "Implement API Key management functionality."
+      ]
+    },
+    "date": "2025-07-28",
+    "version": "1.105.0"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.104.5",
+  "version": "1.105.1",
   "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/[variants]/(main)/profile/apikey/Client.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { Button } from '@lobehub/ui';
+import { useMutation } from '@tanstack/react-query';
+import { Popconfirm, Switch } from 'antd';
+import { createStyles } from 'antd-style';
+import { Trash } from 'lucide-react';
+import { FC, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { lambdaClient } from '@/libs/trpc/client';
+import { ApiKeyItem, CreateApiKeyParams, UpdateApiKeyParams } from '@/types/apiKey';
+
+import { ApiKeyDisplay, ApiKeyModal, EditableCell } from './features';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    .ant-pro-card-body {
+      padding-inline: 0;
+
+      .ant-pro-table-list-toolbar-container {
+        padding-block-start: 0;
+      }
+    }
+  `,
+  header: css`
+    display: flex;
+    justify-content: flex-end;
+    margin-block-end: ${token.margin}px;
+  `,
+  table: css`
+    border-radius: ${token.borderRadius}px;
+    background: ${token.colorBgContainer};
+  `,
+}));
+
+const Client: FC = () => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('auth');
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const actionRef = useRef<ActionType>(null);
+
+  const createMutation = useMutation({
+    mutationFn: (params: CreateApiKeyParams) => lambdaClient.apiKey.createApiKey.mutate(params),
+    onSuccess: () => {
+      actionRef.current?.reload();
+      setModalOpen(false);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, params }: { id: number; params: UpdateApiKeyParams }) =>
+      lambdaClient.apiKey.updateApiKey.mutate({ id, value: params }),
+    onSuccess: () => {
+      actionRef.current?.reload();
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => lambdaClient.apiKey.deleteApiKey.mutate({ id }),
+    onSuccess: () => {
+      actionRef.current?.reload();
+    },
+  });
+
+  const handleCreate = () => {
+    setModalOpen(true);
+  };
+
+  const handleModalOk = (values: CreateApiKeyParams) => {
+    createMutation.mutate(values);
+  };
+
+  const columns: ProColumns<ApiKeyItem>[] = [
+    {
+      dataIndex: 'name',
+      key: 'name',
+      render: (_, apiKey) => (
+        <EditableCell
+          onSubmit={(name) => {
+            if (!name || name === apiKey.name) {
+              return;
+            }
+
+            updateMutation.mutate({ id: apiKey.id!, params: { name: name as string } });
+          }}
+          placeholder={t('apikey.display.enterPlaceholder')}
+          type="text"
+          value={apiKey.name}
+        />
+      ),
+      title: t('apikey.list.columns.name'),
+    },
+    {
+      dataIndex: 'key',
+      ellipsis: true,
+      key: 'key',
+      render: (_, apiKey) => <ApiKeyDisplay apiKey={apiKey.key} />,
+      title: t('apikey.list.columns.key'),
+      width: 230,
+    },
+    {
+      dataIndex: 'enabled',
+      key: 'enabled',
+      render: (_, apiKey: ApiKeyItem) => (
+        <Switch
+          checked={!!apiKey.enabled}
+          onChange={(checked) => {
+            updateMutation.mutate({ id: apiKey.id!, params: { enabled: checked } });
+          }}
+        />
+      ),
+      title: t('apikey.list.columns.status'),
+      width: 100,
+    },
+    {
+      dataIndex: 'expiresAt',
+      key: 'expiresAt',
+      render: (_, apiKey) => (
+        <EditableCell
+          onSubmit={(expiresAt) => {
+            if (expiresAt === apiKey.expiresAt) {
+              return;
+            }
+
+            updateMutation.mutate({
+              id: apiKey.id!,
+              params: { expiresAt: expiresAt ? new Date(expiresAt as string) : null },
+            });
+          }}
+          placeholder={t('apikey.display.neverExpires')}
+          type="date"
+          value={apiKey.expiresAt?.toLocaleString() || t('apikey.display.neverExpires')}
+        />
+      ),
+      title: t('apikey.list.columns.expiresAt'),
+      width: 170,
+    },
+    {
+      dataIndex: 'lastUsedAt',
+      key: 'lastUsedAt',
+      renderText: (_, apiKey: ApiKeyItem) =>
+        apiKey.lastUsedAt?.toLocaleString() || t('apikey.display.neverUsed'),
+      title: t('apikey.list.columns.lastUsedAt'),
+    },
+    {
+      key: 'action',
+      render: (_: any, apiKey: ApiKeyItem) => (
+        <Popconfirm
+          cancelText={t('apikey.list.actions.deleteConfirm.actions.cancel')}
+          description={t('apikey.list.actions.deleteConfirm.content')}
+          okText={t('apikey.list.actions.deleteConfirm.actions.ok')}
+          onConfirm={() => deleteMutation.mutate(apiKey.id!)}
+          title={t('apikey.list.actions.deleteConfirm.title')}
+        >
+          <Button
+            icon={Trash}
+            size="small"
+            style={{ verticalAlign: 'middle' }}
+            title={t('apikey.list.actions.delete')}
+            type="text"
+          />
+        </Popconfirm>
+      ),
+      title: t('apikey.list.columns.actions'),
+      width: 100,
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <ProTable
+        actionRef={actionRef}
+        className={styles.table}
+        columns={columns}
+        headerTitle={t('apikey.list.title')}
+        options={false}
+        pagination={false}
+        request={async () => {
+          const apiKeys = await lambdaClient.apiKey.getApiKeys.query();
+
+          return {
+            data: apiKeys,
+            success: true,
+          };
+        }}
+        rowKey="id"
+        search={false}
+        toolbar={{
+          actions: [
+            <Button key="create" onClick={handleCreate} type="primary">
+              {t('apikey.list.actions.create')}
+            </Button>,
+          ],
+        }}
+      />
+      <ApiKeyModal
+        onCancel={() => setModalOpen(false)}
+        onOk={handleModalOk}
+        open={modalOpen}
+        submitLoading={createMutation.isPending}
+      />
+    </div>
+  );
+};
+
+export default Client;

package/src/app/[variants]/(main)/profile/apikey/features/ApiKeyDatePicker/index.tsx

@@ -0,0 +1,39 @@
+import { DatePicker } from '@lobehub/ui';
+import { DatePickerProps, Flex } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ApiKeyDatePickerProps extends Omit<DatePickerProps, 'onChange'> {
+  onChange?: (date: Dayjs | null) => void;
+}
+
+const ApiKeyDatePicker: FC<ApiKeyDatePickerProps> = ({ value, onChange, ...props }) => {
+  const { t } = useTranslation('auth');
+
+  const handleOnChange = (date: Dayjs | null) => {
+    // 如果选择了日期，设置为当天的 23:59:59
+    const submitData = date ? date.hour(23).minute(59).second(59).millisecond(999) : null;
+
+    onChange?.(submitData);
+  };
+
+  return (
+    <DatePicker
+      key={value?.valueOf() || 'EMPTY'}
+      value={value}
+      {...props}
+      minDate={dayjs()}
+      onChange={handleOnChange}
+      placeholder={t('apikey.form.fields.expiresAt.placeholder')}
+      renderExtraFooter={() => (
+        <Flex justify="center">
+          <a onClick={() => handleOnChange(null)}>{t('apikey.display.neverExpires')}</a>
+        </Flex>
+      )}
+      showNow={false}
+    />
+  );
+};
+
+export default ApiKeyDatePicker;

package/src/app/[variants]/(main)/profile/apikey/features/ApiKeyDisplay/index.tsx

@@ -0,0 +1,60 @@
+import { CopyOutlined, EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
+import { Button } from '@lobehub/ui';
+import { App, Flex } from 'antd';
+import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ApiKeyDisplayProps {
+  apiKey?: string;
+}
+
+const ApiKeyDisplay: FC<ApiKeyDisplayProps> = ({ apiKey }) => {
+  const { t } = useTranslation('auth');
+  const [isVisible, setIsVisible] = useState(false);
+  const { message } = App.useApp();
+
+  const toggleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
+
+  const handleCopy = async () => {
+    if (!apiKey) return;
+
+    try {
+      await navigator.clipboard.writeText(apiKey);
+      message.success(t('apikey.display.copySuccess'));
+    } catch {
+      message.error(t('apikey.display.copyError'));
+    }
+  };
+
+  const displayValue = apiKey && (isVisible ? apiKey : `lb-${'*'.repeat(apiKey.length - 2)}`);
+
+  if (!apiKey) {
+    return t('apikey.display.autoGenerated');
+  }
+
+  return (
+    <Flex align="center" gap={8}>
+      <span style={{ fontSize: '14px' }}>{displayValue}</span>
+      <Flex>
+        <Button
+          icon={isVisible ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+          onClick={toggleVisibility}
+          size="small"
+          title={isVisible ? t('apikey.display.hide') : t('apikey.display.show')}
+          type="text"
+        />
+        <Button
+          icon={<CopyOutlined />}
+          onClick={handleCopy}
+          size="small"
+          title={t('apikey.display.copy')}
+          type="text"
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ApiKeyDisplay;

package/src/app/[variants]/(main)/profile/apikey/features/ApiKeyModal/index.tsx

@@ -0,0 +1,58 @@
+import { FormModal, Input } from '@lobehub/ui';
+import { Dayjs } from 'dayjs';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CreateApiKeyParams } from '@/types/apiKey';
+
+import ApiKeyDatePicker from '../ApiKeyDatePicker';
+
+interface ApiKeyModalProps {
+  onCancel: () => void;
+  onOk: (values: CreateApiKeyParams) => void;
+  open: boolean;
+  submitLoading?: boolean;
+}
+
+type FormValues = Omit<CreateApiKeyParams, 'expiresAt'> & {
+  expiresAt: Dayjs | null;
+};
+
+const ApiKeyModal: FC<ApiKeyModalProps> = ({ open, onCancel, onOk, submitLoading }) => {
+  const { t } = useTranslation('auth');
+
+  return (
+    <FormModal
+      destroyOnHidden
+      height={'90%'}
+      itemMinWidth={'max(30%,240px)'}
+      items={[
+        {
+          children: <Input placeholder={t('apikey.form.fields.name.placeholder')} />,
+          label: t('apikey.form.fields.name.label'),
+          name: 'name',
+          rules: [{ required: true }],
+        },
+        {
+          children: <ApiKeyDatePicker style={{ width: '100%' }} />,
+          label: t('apikey.form.fields.expiresAt.label'),
+          name: 'expiresAt',
+        },
+      ]}
+      itemsType={'flat'}
+      onCancel={onCancel}
+      onFinish={(values: FormValues) => {
+        onOk({
+          ...values,
+          expiresAt: values.expiresAt ? values.expiresAt.toDate() : null,
+        } satisfies CreateApiKeyParams);
+      }}
+      open={open}
+      submitLoading={submitLoading}
+      submitText={t('apikey.form.submit')}
+      title={t('apikey.form.title')}
+    />
+  );
+};
+
+export default ApiKeyModal;

package/src/app/[variants]/(main)/profile/apikey/features/EditableCell/index.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { ActionIcon, Input } from '@lobehub/ui';
+import { App, InputRef } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs, { Dayjs } from 'dayjs';
+import { Check, Edit, X } from 'lucide-react';
+import React, { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ApiKeyDatePicker from '../ApiKeyDatePicker';
+
+// 内容类型定义
+export type ContentType = 'text' | 'date';
+
+// 组件Props接口定义
+export interface EditableCellProps {
+  /** 是否禁用编辑 */
+  disabled?: boolean;
+  /** 提交回调函数 */
+  onSubmit: (value: string | Date | null) => void;
+  /** 占位符文本 */
+  placeholder?: string;
+  /** 内容类型 */
+  type: ContentType;
+  /** 从数据库中查出的值，不管是什么类型，存进去的都是字符串 */
+  value: string | null;
+}
+
+// 样式定义
+const useStyles = createStyles(({ css, token }) => ({
+  actionButtons: css`
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+  `,
+  container: css`
+    position: relative;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    min-height: 32px;
+
+    &:hover .edit-button {
+      opacity: 1;
+    }
+  `,
+  content: css`
+    min-width: 0;
+    line-height: 1.5;
+    color: ${token.colorText};
+    word-break: break-all;
+  `,
+  editButton: css`
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    &.edit-button {
+      opacity: 0;
+    }
+  `,
+  editingContainer: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    width: 100%;
+  `,
+  inputWrapper: css`
+    flex: 1;
+  `,
+  textareaWrapper: css`
+    flex: 1;
+  `,
+}));
+
+// 主组件实现
+const EditableCell = memo<EditableCellProps>(
+  ({ value, type, onSubmit, placeholder, disabled = false }) => {
+    const { styles, cx } = useStyles();
+    const { t } = useTranslation('auth');
+    const { message } = App.useApp();
+
+    // 编辑状态管理
+    const [isEditing, setIsEditing] = useState(false);
+
+    // 用于Input的ref
+    const inputRef = useRef<InputRef>(null);
+
+    // 格式化显示值
+    const formatDisplayValue = (val: string | null) => {
+      if (type === 'date' && val) {
+        const date = dayjs(val);
+
+        return date.isValid() ? date.format('YYYY-MM-DD') : val || placeholder || '';
+      }
+
+      return val || placeholder || '';
+    };
+
+    // 开始编辑
+    const handleEdit = () => {
+      if (disabled) return;
+
+      setIsEditing(true);
+    };
+
+    // 提交编辑
+    const handleSubmit = () => {
+      if (type === 'text') {
+        const inputValue = inputRef.current?.input?.value;
+
+        if (!inputValue) {
+          message.warning(t('apikey.validation.required'));
+          return;
+        }
+
+        onSubmit(inputValue);
+      }
+
+      setIsEditing(false);
+    };
+
+    // 取消编辑
+    const handleCancel = () => {
+      setIsEditing(false);
+    };
+
+    // 输入框组件的键盘事件处理
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        handleCancel();
+      }
+    };
+
+    // 日期选择器提交
+    const handleDatePickerSubmit = (date: Dayjs | null) => {
+      onSubmit(date && dayjs(date).toISOString());
+
+      setIsEditing(false);
+    };
+
+    // 渲染编辑模式
+    const renderEditMode = () => {
+      switch (type) {
+        case 'text': {
+          return (
+            <div className={styles.inputWrapper}>
+              <Input
+                autoFocus
+                defaultValue={value as string}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                ref={inputRef}
+              />
+            </div>
+          );
+        }
+
+        case 'date': {
+          const dateValue = value && dayjs(value).isValid() ? dayjs(value) : null;
+
+          return (
+            <ApiKeyDatePicker
+              defaultValue={dateValue}
+              onChange={handleDatePickerSubmit}
+              onOpenChange={() => {
+                if (isEditing) {
+                  setIsEditing(false);
+                }
+              }}
+              open={true}
+            />
+          );
+        }
+
+        default: {
+          return null;
+        }
+      }
+    };
+
+    // 文本类型的编辑模式，展示保存和取消按钮
+    if (type === 'text' && isEditing) {
+      return (
+        <div className={styles.editingContainer}>
+          {renderEditMode()}
+          <div className={styles.actionButtons}>
+            <ActionIcon icon={Check} onClick={handleSubmit} size="small" />
+            <ActionIcon icon={X} onClick={handleCancel} size="small" />
+          </div>
+        </div>
+      );
+    }
+
+    // 日期类型的编辑模式，展示日期选择器
+    if (type === 'date' && isEditing) {
+      return renderEditMode();
+    }
+
+    // 展示模式
+    return (
+      <div className={styles.container}>
+        <div className={styles.content}>{formatDisplayValue(value)}</div>
+        <ActionIcon
+          className={cx(styles.editButton, 'edit-button')}
+          icon={Edit}
+          onClick={handleEdit}
+          size="small"
+        />
+      </div>
+    );
+  },
+);
+
+EditableCell.displayName = 'EditableCell';
+
+export default EditableCell;

package/src/app/[variants]/(main)/profile/apikey/features/index.ts

@@ -0,0 +1,3 @@
+export { default as ApiKeyDisplay } from './ApiKeyDisplay';
+export { default as ApiKeyModal } from './ApiKeyModal';
+export { default as EditableCell } from './EditableCell';