✨ feat: 优化模型上传提示

src/app/chat/ViewerMode/index.tsx

@@ -1,15 +1,17 @@
 'use client';
 
 import classNames from 'classnames';
+import { isEqual } from 'lodash-es';
 import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { HEADER_HEIGHT } from '@/constants/token';
-import AgentViewer from '@/features/AgentViewer/Chat';
+import AgentViewer from '@/features/AgentViewer';
 import Alert from '@/features/Alert';
 import ChatDialog from '@/features/ChatDialog';
 import MessageInput from '@/features/ChatInput/MessageInput';
 import { useGlobalStore } from '@/store/global';
+import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import { useStyles } from './style';
 
@@ -19,11 +21,15 @@ export default memo(() => {
     s.setChatDialog,
   ]);
   const { styles } = useStyles();
+  const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s), isEqual]);
 
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div className={styles.viewer}>
-        <AgentViewer height={`calc(100vh - ${HEADER_HEIGHT}px);`} />
+        <AgentViewer
+          height={`calc(100vh - ${HEADER_HEIGHT}px);`}
+          modelUrl={currentAgent?.meta.model}
+        />
       </div>
       {showChatDialog ? (
         <ChatDialog className={classNames(styles.dialog, styles.content)} setOpen={setChatDialog} />

src/constants/common.ts

@@ -29,3 +29,5 @@ export const DEFAULT_USER_AVATAR_URL =
 
 export const DEFAULT_AGENT_AVATAR_URL =
   'https://registry.npmmirror.com/@lobehub/assets-logo/1.2.0/files/assets/logo-3d.webp';
+export const ROLE_VIEWER_HEIGHT = 640;
+export const ROLE_VIEWER_WIDTH = 400;

src/constants/token.ts

@@ -19,5 +19,3 @@ export const INPUT_WIDTH_S = 240;
 export const INPUT_WIDTH_M = 320;
 export const INPUT_WIDTH_L = 480;
 export const INPUT_WIDTH_XL = 640;
-
-export const ROLE_VIEWER_HEIGHT = 640;

src/features/AgentViewer/Chat/index.tsx → src/features/AgentViewer/index.tsx

@@ -1,42 +1,48 @@
 import classNames from 'classnames';
-import { isEqual } from 'lodash-es';
-import React, { memo, useCallback, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
 
 import PageLoading from '@/components/PageLoading';
 import { useLoadVrm } from '@/hooks/useLoadVrm';
-import { sessionSelectors, useSessionStore } from '@/store/session';
 import { useViewerStore } from '@/store/viewer';
 
-import ToolBar from '../components/ToolBar';
+import ToolBar from './ToolBar';
 import { useStyles } from './style';
 
 interface Props {
   className?: string;
   height?: number | string;
+  modelUrl?: string;
   style?: React.CSSProperties;
+  width?: number | string;
 }
 
 function AgentViewer(props: Props) {
-  const { className, style, height } = props;
+  const { className, style, height, modelUrl, width } = props;
   const { styles } = useStyles();
   const ref = useRef<HTMLDivElement>(null);
   const viewer = useViewerStore((s) => s.viewer);
-  const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s), isEqual]);
 
   const { loading, loadVrm } = useLoadVrm(viewer);
 
+  useEffect(() => {
+    loadVrm(modelUrl);
+  }, [modelUrl]);
+
   const canvasRef = useCallback(
     (canvas: HTMLCanvasElement) => {
       if (canvas) {
         viewer.setup(canvas);
-        loadVrm(currentAgent?.meta.model);
       }
     },
-    [viewer, currentAgent?.meta.model],
+    [viewer],
   );
 
   return (
-    <div ref={ref} className={classNames(styles.viewer, className)} style={{ height, ...style }}>
+    <div
+      ref={ref}
+      className={classNames(styles.viewer, className)}
+      style={{ height, width, ...style }}
+    >
       <ToolBar className={styles.toolbar} viewer={viewer} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} className={styles.loading} /> : null}
       <canvas ref={canvasRef} className={styles.canvas}></canvas>

src/features/AgentViewer/Chat/style.ts → src/features/AgentViewer/style.ts

@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => ({
   viewer: css`
     position: relative;
+    width: 100%;
     height: 100%;
     min-height: 0;
   `,

src/hooks/useLoadVrm.ts

@@ -2,13 +2,14 @@ import localforage from 'localforage';
 import { useState } from 'react';
 
 import { Viewer } from '@/features/vrmViewer/viewer';
+import { isModelKey } from '@/utils/model';
 
 export const useLoadVrm = (viewer: Viewer) => {
   const [loading, setLoading] = useState(false);
 
   const loadVrm = async (url?: string) => {
     let vrmUrl = url;
-    if (url && url.startsWith('model:')) {
+    if (url && isModelKey(url)) {
       const blob = await localforage.getItem(url);
       if (blob) {
         vrmUrl = window.URL.createObjectURL(blob as Blob);

src/panels/RolePanel/RoleEdit/Model/ViewerWithUpload/index.tsx

@@ -0,0 +1,55 @@
+import { Upload } from 'antd';
+import localforage from 'localforage';
+import React, { CSSProperties, memo } from 'react';
+
+import EmptyGuide from '@/components/EmptyGuide';
+import { ROLE_VIEWER_HEIGHT, ROLE_VIEWER_WIDTH } from '@/constants/common';
+import AgentViewer from '@/features/AgentViewer';
+import { agentSelectors, useAgentStore } from '@/store/agent';
+import { generateModelKey } from '@/utils/model';
+
+interface ViewerWithUploadProps {
+  style?: CSSProperties;
+}
+
+const ViewerWithUpload = memo<ViewerWithUploadProps>(({ style }) => {
+  const [currentAgentModel, updateAgentConfig] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    s.updateAgentConfig,
+  ]);
+
+  const handleUploadAvatar = (file: any) => {
+    const { name, size } = file;
+    const blob = new Blob([file], { type: 'application/octet-stream' });
+    const modelKey = generateModelKey(name, size);
+    localforage.setItem(modelKey, blob).then(() => {
+      updateAgentConfig({ meta: { model: modelKey } });
+    });
+  };
+
+  return (
+    <Upload
+      beforeUpload={handleUploadAvatar}
+      itemRender={() => void 0}
+      accept={'.vrm'}
+      maxCount={1}
+      style={style}
+      openFileDialogOnClick={!currentAgentModel}
+    >
+      {currentAgentModel ? (
+        <AgentViewer
+          height={ROLE_VIEWER_HEIGHT}
+          modelUrl={currentAgentModel}
+          width={ROLE_VIEWER_WIDTH}
+        />
+      ) : (
+        <EmptyGuide
+          size={{ height: ROLE_VIEWER_HEIGHT, width: ROLE_VIEWER_WIDTH }}
+          extra={`支持单个文件上传，当前仅支持 .vrm 格式文件`}
+        />
+      )}
+    </Upload>
+  );
+});
+
+export default ViewerWithUpload;

src/panels/RolePanel/RoleEdit/Model/index.tsx

@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import React from 'react';
 
-import AgentViewer from '@/features/AgentViewer/Role';
+import ViewerWithUpload from '@/panels/RolePanel/RoleEdit/Model/ViewerWithUpload';
 
 import Touch from './Touch';
 
@@ -45,7 +45,7 @@ const Model = (props: ModelProps) => {
         </div>
         <div className={styles.right}>
           <FormItem label={'模型预览'} name={'model'} desc="模型预览，可拖动模型文件以替换" />
-          <AgentViewer />
+          <ViewerWithUpload />
         </div>
       </div>
     </Form>

src/utils/model.ts

@@ -0,0 +1,9 @@
+const MODEL_SCHEMA = 'model';
+
+export const generateModelKey = (name: string, size: number) => {
+  return `${MODEL_SCHEMA}://${name}-${size}`;
+};
+
+export const isModelKey = (key: string) => {
+  return key.startsWith(MODEL_SCHEMA);
+};