🐛 fix: 修复 Chat 和 Role 角色预览错乱

src/app/api/voice/microsoft/voices/route.ts

@@ -16849,9 +16849,9 @@ const cachedVoiceList: Voice[] = [
       DisplayName: 'Aria',
       DisplayVoiceName: 'AriaNeural',
       ExpressAsRoleValues:
-        'Default,Chat,Cheerful,CustomerService,Empathy,Newscast-Formal,Newscast-Casual',
+        'Default,Role,Cheerful,CustomerService,Empathy,Newscast-Formal,Newscast-Casual',
       ExpressAsStyleValues:
-        'Default,Chat,Cheerful,CustomerService,Empathy,Newscast-Formal,Newscast-Casual',
+        'Default,Role,Cheerful,CustomerService,Empathy,Newscast-Formal,Newscast-Casual',
       FrontendVoiceType: 'Neural',
       Gender: 'Female',
       LocalName: 'Aria',

src/app/chat/ViewerMode/index.tsx

@@ -5,7 +5,7 @@ import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { HEADER_HEIGHT } from '@/constants/common';
-import AgentViewer from '@/features/AgentViewer';
+import AgentViewer from '@/features/AgentViewer/Chat';
 import Alert from '@/features/Alert';
 import ChatDialog from '@/features/ChatDialog';
 import MessageInput from '@/features/ChatInput/MessageInput';

src/app/role/page.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import TopBanner from '@/components/TopBanner';
-import AgentViewer from '@/features/AgentViewer/index';
+import AgentViewer from '@/features/AgentViewer/Role';
 import RoleEdit from '@/panels/RolePanel/RoleEdit';
 
 import SideBar from './SideBar';

src/features/AgentViewer/Chat/index.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import { isEqual } from 'lodash-es';
+import React, { memo, useCallback, 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 { useStyles } from './style';
+
+interface Props {
+  className?: string;
+  height?: number | string;
+  style?: React.CSSProperties;
+}
+
+function AgentViewer(props: Props) {
+  const { className, style, height } = 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);
+
+  const canvasRef = useCallback(
+    (canvas: HTMLCanvasElement) => {
+      if (canvas) {
+        viewer.setup(canvas);
+        loadVrm(currentAgent?.meta.model);
+      }
+    },
+    [viewer, currentAgent?.meta.model],
+  );
+
+  return (
+    <div ref={ref} className={classNames(styles.viewer, className)} style={style}>
+      <ToolBar className={styles.toolbar} viewer={viewer} />
+      {loading ? <PageLoading title={'模型加载中，请稍后...'} className={styles.loading} /> : null}
+      <canvas ref={canvasRef} className={styles.canvas} style={{ height }}></canvas>
+    </div>
+  );
+}
+
+export default memo(AgentViewer);

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

@@ -1,12 +1,13 @@
 import classNames from 'classnames';
 import localforage from 'localforage';
-import React, { memo, useCallback, useRef, useState } from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 
 import PageLoading from '@/components/PageLoading';
-import ToolBar from '@/features/AgentViewer/ToolBar';
+import { useLoadVrm } from '@/hooks/useLoadVrm';
 import { agentListSelectors, useAgentStore } from '@/store/agent';
 import { useViewerStore } from '@/store/viewer';
 
+import ToolBar from '../components/ToolBar';
 import { useStyles } from './style';
 
 interface Props {
@@ -16,43 +17,24 @@ interface Props {
 }
 
 function AgentViewer(props: Props) {
-  const viewer = useViewerStore((s) => s.viewer);
   const { className, style, height } = props;
   const { styles } = useStyles();
-  const [loading, setLoading] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const currentAgentModel = useAgentStore((s) => agentListSelectors.currentAgentModel(s));
-  const currentAgentId = useAgentStore((s) => agentListSelectors.currentAgentId(s));
-  const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+  const viewer = useViewerStore((s) => s.viewer);
+  const [currentAgentModel, currentAgentId, updateAgentConfig] = useAgentStore((s) => [
+    agentListSelectors.currentAgentModel(s),
+    agentListSelectors.currentAgentId(s),
+    s.updateAgentConfig,
+  ]);
 
-  console.log('currentAgentModel', currentAgentModel, currentAgentId);
-
-  const loadVrm = async (url?: string) => {
-    let vrmUrl = url;
-    if (url && url.startsWith('model:')) {
-      const blob = await localforage.getItem(url);
-      if (blob) {
-        vrmUrl = window.URL.createObjectURL(blob as Blob);
-      } else {
-        vrmUrl = undefined;
-      }
-    }
-    console.log('loadVrm', vrmUrl);
-    if (vrmUrl) {
-      setLoading(true);
-      viewer.loadVrm(vrmUrl).finally(() => {
-        setLoading(false);
-      });
-    } else {
-      viewer.unloadVRM();
-    }
-  };
+  const { loading, loadVrm } = useLoadVrm(viewer);
 
   const canvasRef = useCallback(
     (canvas: HTMLCanvasElement) => {
-      viewer.setup(canvas);
-      console.log('currentAgentModel', currentAgentModel);
-      loadVrm(currentAgentModel);
+      if (canvas) {
+        viewer.setup(canvas);
+        loadVrm(currentAgentModel);
+      }
 
       const dragoverHandler = (event: DragEvent) => {
         event.preventDefault();
@@ -94,7 +76,7 @@ function AgentViewer(props: Props) {
 
   return (
     <div ref={ref} className={classNames(styles.viewer, className)} style={style}>
-      <ToolBar className={styles.toolbar} viewerRef={ref} />
+      <ToolBar className={styles.toolbar} viewer={viewer} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} className={styles.loading} /> : null}
       <canvas ref={canvasRef} className={styles.canvas} style={{ height }}></canvas>
     </div>

src/features/AgentViewer/Role/style.ts

@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  viewer: css`
+    position: relative;
+    height: 100%;
+    min-height: 0;
+  `,
+  toolbar: css`
+    position: absolute;
+    right: ${token.paddingMD}px;
+    bottom: 50%;
+    display: flex;
+  `,
+  loading: css`
+    position: absolute;
+    top: 0;
+    left: 0;
+  `,
+  canvas: css`
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  `,
+}));

src/features/AgentViewer/ToolBar/index.tsx → src/features/AgentViewer/components/ToolBar/index.tsx

@@ -2,24 +2,16 @@ import { ActionIconGroup } from '@lobehub/ui';
 import { Grid3x3, LandPlot, Orbit, RotateCw, SwitchCamera } from 'lucide-react';
 import React from 'react';
 
-import { useViewerStore } from '@/store/viewer';
+import { Viewer } from '@/features/vrmViewer/viewer';
 
 interface ToolBarProps {
   className?: string;
   style?: React.CSSProperties;
-  viewerRef?: React.RefObject<HTMLDivElement>;
+  viewer: Viewer;
 }
 
 const ToolBar = (props: ToolBarProps) => {
-  const { style, className, viewerRef } = props;
-  const viewer = useViewerStore((s) => s.viewer);
-  const toggleFullScreen = () => {
-    if (!document.fullscreenElement) {
-      viewerRef?.current?.requestFullscreen();
-    } else {
-      document.exitFullscreen();
-    }
-  };
+  const { style, className, viewer } = props;
 
   const dropdownMenu = [
     {
@@ -50,11 +42,6 @@ const ToolBar = (props: ToolBarProps) => {
           key: 'resetCamera',
           label: '重置镜头',
         },
-        // {
-        //   icon: Expand,
-        //   key: 'expand',
-        //   label: '全屏',
-        // },
         {
           icon: Grid3x3,
           key: 'grid',
@@ -68,11 +55,6 @@ const ToolBar = (props: ToolBarProps) => {
 
             break;
           }
-          case 'expand': {
-            toggleFullScreen();
-
-            break;
-          }
           case 'grid': {
             viewer.toggleGrid();
 

src/features/Settings/model/openai.tsx

@@ -56,7 +56,7 @@ const Config = (props: ConfigProps) => {
       >
         {/* @ts-ignore */}
         <FormGroup icon={BotIcon} title={'OpenAI 语言模型'}>
-          <FormItem desc={'Chat GPT 模型'} label={'模型'} name="model">
+          <FormItem desc={'Role GPT 模型'} label={'模型'} name="model">
             <Select
               options={OPENAI_MODEL_LIST.map((model) => ({
                 label: (

src/hooks/useLoadVrm.ts

@@ -0,0 +1,30 @@
+import localforage from 'localforage';
+import { useState } from 'react';
+
+import { Viewer } from '@/features/vrmViewer/viewer';
+
+export const useLoadVrm = (viewer: Viewer) => {
+  const [loading, setLoading] = useState(false);
+
+  const loadVrm = async (url?: string) => {
+    let vrmUrl = url;
+    if (url && url.startsWith('model:')) {
+      const blob = await localforage.getItem(url);
+      if (blob) {
+        vrmUrl = window.URL.createObjectURL(blob as Blob);
+      } else {
+        vrmUrl = undefined;
+      }
+    }
+    if (vrmUrl) {
+      setLoading(true);
+      viewer.loadVrm(vrmUrl).finally(() => {
+        setLoading(false);
+      });
+    } else {
+      viewer.unloadVRM();
+    }
+  };
+
+  return { loading, loadVrm };
+};

src/types/openai/chat.ts

@@ -33,7 +33,7 @@ export interface OpenAIChatMessage {
 }
 
 /**
- * @title Chat Stream Payload
+ * @title Role Stream Payload
  */
 export interface ChatStreamPayload {
   /**