feat: use local files

src/app/chat/ViewerMode/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import classNames from 'classnames';
-import { isEqual } from 'lodash-es';
 import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -21,16 +20,15 @@ export default memo(() => {
     s.setChatDialog,
   ]);
   const { styles } = useStyles();
-  const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s), isEqual]);
+  const currentAgent = useSessionStore((s) => sessionSelectors.currentAgent(s));
 
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
-      <div className={styles.viewer}>
-        <AgentViewer
-          height={`calc(100vh - ${HEADER_HEIGHT}px)`}
-          modelUrl={currentAgent?.meta.model}
-        />
-      </div>
+      {currentAgent ? (
+        <div className={styles.viewer}>
+          <AgentViewer height={`calc(100vh - ${HEADER_HEIGHT}px)`} agent={currentAgent} />
+        </div>
+      ) : null}
       {showChatDialog ? (
         <ChatDialog className={classNames(styles.dialog, styles.content)} setOpen={setChatDialog} />
       ) : null}

src/components/PageLoading/index.tsx

@@ -5,9 +5,9 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 interface PageLoadingProps {
   className?: string;
-  description?: string;
+  description?: React.ReactNode;
   style?: React.CSSProperties;
-  title: string;
+  title: React.ReactNode;
 }
 
 const PageLoading = (props: PageLoadingProps) => {
@@ -16,7 +16,7 @@ const PageLoading = (props: PageLoadingProps) => {
     <Flexbox height={'100%'} width={'100%'} className={className} style={style}>
       <Center flex={1} gap={12} width={'100%'}>
         <Logo extra={'Vidol'} size={48} type={'combine'} />
-        <Center gap={16} horizontal>
+        <Center gap={8} horizontal>
           <Icon icon={Loader2} spin />
           {title}
         </Center>

src/constants/common.ts

@@ -13,7 +13,7 @@ export const MAX_NAME_LENGTH = 20;
 export const MAX_WIDTH = 1024;
 export const MAX_DESCRIPTION_LENGTH = 100;
 export const MAX_GREETING_LENGTH = 200;
-export const MAX_README_LENGTH = 800;
+export const MAX_README_LENGTH = 999;
 
 export const MAX_SYSTEM_ROLE_LENGTH = 9999;
 

src/constants/dance.ts

@@ -1,17 +1,18 @@
 import { Dance } from '@/types/dance';
 
+export const LOBE_VIDOL_DEFAULT_DANCE_ID = 'vidol-dance-gokuraku';
+
 export const DEFAULT_DANCE: Dance = {
-  danceId: 'vidol-dance-gokuraku',
+  danceId: LOBE_VIDOL_DEFAULT_DANCE_ID,
   name: '極楽浄土',
+  author: 'rdmclin2',
+  homepage: 'https://github.com/rdmclin2',
   createAt: '2023-10-31',
-  author: 'Vidol',
-  homepage: 'https://github.com/lobehub/lobe-vidol',
-  src: 'https://registry.npmmirror.com/@v-idol/vidol-dance-gokuraku/1.0.0/files/gokuraku.vmd',
-  audio:
-    'https://registry.npmmirror.com/@v-idol/vidol-dance-gokuraku/1.0.0/files/Gokuraku jodo.mp3',
-  cover: 'https://registry.npmmirror.com/@v-idol/vidol-dance-gokuraku/1.0.0/files/cover.jpg',
-  thumb: 'https://registry.npmmirror.com/@v-idol/vidol-dance-gokuraku/1.0.0/files/thumb.jpg',
+  src: 'https://r2.vidol.chat/dances/vidol-dance-gokuraku/gokuraku.vmd',
+  audio: 'https://r2.vidol.chat/dances/vidol-dance-gokuraku/Gokuraku jodo.mp3',
+  cover: 'https://r2.vidol.chat/dances/vidol-dance-gokuraku/cover.jpg',
+  thumb: 'https://r2.vidol.chat/dances/vidol-dance-gokuraku/thumb.jpg',
   readme:
-    'WHAT CHANGED?!\r\n-FIXED THE GOOGLY/SHAKY EYES\r\n-Added eye motions that were supposed to be there\r\n-Audio is slightly more in sync\r\n\r\nSong: 【GARNiDELiA】極楽浄土【とく×メイリア】\r\nhttps://www.nicovideo.jp/watch/sm28709142\r\n\r\nMotion by yurie\r\nhttps://www.nicovideo.jp/watch/sm29180863',
+    '\uFEFFWHAT CHANGED?!\r\n-FIXED THE GOOGLY/SHAKY EYES\r\n-Added eye motions that were supposed to be there\r\n-Audio is slightly more in sync\r\n\r\nSong: 【GARNiDELiA】極楽浄土【とく×メイリア】\r\nhttps://www.nicovideo.jp/watch/sm28709142\r\n\r\nMotion by yurie\r\nhttps://www.nicovideo.jp/watch/sm29180863',
   schemaVersion: 1,
 };

src/constants/openai.ts

@@ -1,61 +1,180 @@
 export const OPENAI_API_KEY = 'x-openai-apikey';
 export const OPENAI_END_POINT = 'x-openai-endpoint';
 
-interface OPENAI_MODEL {
+export interface ChatModelCard {
   /**
-   * 最大 Token 数
+   * only used in azure
    */
-  maxToken: number;
+  deploymentName?: string;
+  description?: string;
   /**
-   * 模型名称
+   * the name show for end user
    */
-  name: string;
+  displayName?: string;
+
+  /**
+   * whether model is enabled by default
+   */
+  enabled?: boolean;
+  /**
+   * whether model supports file upload
+   */
+  files?: boolean;
+  /**
+   * whether model supports function call
+   */
+  functionCall?: boolean;
+  id: string;
+  /**
+   * whether model is custom
+   */
+  isCustom?: boolean;
+  /**
+   * whether model is legacy (deprecated but not removed yet)
+   */
+  legacy?: boolean;
+  maxOutput?: number;
+  /**
+   * the context window (or input + output tokens limit)
+   */
+  tokens?: number;
+  /**
+   *  whether model supports vision
+   */
+  vision?: boolean;
 }
 
 /**
  * OpenAI 模型列表
  */
-export const OPENAI_MODEL_LIST: OPENAI_MODEL[] = [
+export const OPENAI_MODEL_LIST: ChatModelCard[] = [
   // GPT 3.5: https://platform.openai.com/docs/models/gpt-3-5
   {
-    maxToken: 16_385,
-    name: 'gpt-3.5-turbo-1106',
+    description: 'GPT 3.5 Turbo，适用于各种文本生成和理解任务',
+    displayName: 'GPT-3.5 Turbo',
+    enabled: true,
+    functionCall: true,
+    id: 'gpt-3.5-turbo',
+    tokens: 16_385,
+  },
+  {
+    displayName: 'GPT-3.5 Turbo (0125)',
+    functionCall: true,
+    id: 'gpt-3.5-turbo-0125',
+    tokens: 16_385,
+  },
+  {
+    displayName: 'GPT-3.5 Turbo (1106)',
+    functionCall: true,
+    id: 'gpt-3.5-turbo-1106',
+    tokens: 16_385,
+  },
+  {
+    displayName: 'GPT-3.5 Turbo Instruct',
+    id: 'gpt-3.5-turbo-instruct',
+    tokens: 4096,
+  },
+  {
+    description: 'Currently points to gpt-3.5-turbo-16k-0613',
+    displayName: 'GPT-3.5 Turbo 16K',
+    id: 'gpt-3.5-turbo-16k',
+    legacy: true,
+    tokens: 16_385,
+  },
+  {
+    displayName: 'GPT-3.5 Turbo (0613)',
+    id: 'gpt-3.5-turbo-0613',
+    legacy: true,
+    tokens: 4096,
+  },
+  {
+    displayName: 'GPT-3.5 Turbo 16K (0613)',
+    id: 'gpt-3.5-turbo-16k-0613',
+    legacy: true,
+    tokens: 16_385,
+  },
+  {
+    description: 'Currently points to gpt-4-0125-preview',
+    displayName: 'GPT-4 Turbo Preview',
+    functionCall: true,
+    id: 'gpt-4-turbo-preview',
+    tokens: 128_000,
+  },
+  {
+    displayName: 'GPT-4 Turbo Preview (0125)',
+    functionCall: true,
+    id: 'gpt-4-0125-preview',
+    tokens: 128_000,
+  },
+  {
+    description: 'Currently points to gpt-4-1106-vision-preview',
+    displayName: 'GPT-4 Turbo Vision Preview',
+    id: 'gpt-4-vision-preview',
+    tokens: 128_000,
+    vision: true,
   },
   {
-    maxToken: 4096,
-    name: 'gpt-3.5-turbo',
+    displayName: 'GPT-4 Turbo Vision Preview (1106)',
+    id: 'gpt-4-1106-vision-preview',
+    tokens: 128_000,
+    vision: true,
   },
   {
-    maxToken: 16_385,
-    name: 'gpt-3.5-turbo-16k',
+    displayName: 'GPT-4 Turbo Preview (1106)',
+    functionCall: true,
+    id: 'gpt-4-1106-preview',
+    tokens: 128_000,
   },
   {
-    maxToken: 4096,
-    name: 'gpt-3.5-turbo-instruct',
+    description: 'Currently points to gpt-4-0613',
+    displayName: 'GPT-4',
+    functionCall: true,
+    id: 'gpt-4',
+    tokens: 8192,
   },
-  // GPT 4.0 https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo
   {
-    maxToken: 128_000,
-    name: 'gpt-4-1106-preview',
+    displayName: 'GPT-4 (0613)',
+    functionCall: true,
+    id: 'gpt-4-0613',
+    tokens: 8192,
   },
   {
-    maxToken: 128_000,
-    name: 'gpt-4-vision-preview',
+    description: 'Currently points to gpt-4-32k-0613',
+    displayName: 'GPT-4 32K',
+    functionCall: true,
+    id: 'gpt-4-32k',
+    tokens: 32_768,
   },
   {
-    maxToken: 8192,
-    name: 'gpt-4',
+    displayName: 'GPT-4 32K (0613)',
+    functionCall: true,
+    id: 'gpt-4-32k-0613',
+    tokens: 32_768,
   },
   {
-    maxToken: 32_768,
-    name: 'gpt-4-32k',
+    description: 'GPT-4 Turbo with Vision',
+    displayName: 'GPT-4 Turbo',
+    enabled: true,
+    functionCall: true,
+    id: 'gpt-4-turbo',
+    tokens: 128_000,
+    vision: true,
   },
   {
-    maxToken: 8192,
-    name: 'gpt-4-0613',
+    description: 'GPT-4 Turbo 视觉版 (240409)',
+    displayName: 'GPT-4 Turbo Vision (240409)',
+    functionCall: true,
+    id: 'gpt-4-turbo-2024-04-09',
+    tokens: 128_000,
+    vision: true,
   },
   {
-    maxToken: 32_768,
-    name: 'gpt-4-32k-0613',
+    description: 'Currently points to gpt-4o-2024-05-13',
+    displayName: 'GPT-4o',
+    enabled: true,
+    functionCall: true,
+    id: 'gpt-4o',
+    tokens: 128_000,
+    vision: true,
   },
 ];

src/features/Actions/ClearSession.tsx

@@ -12,7 +12,7 @@ interface Props {
 export default (props: Props) => {
   const { text = '立即清除', type = 'primary' } = props;
   const clearAgentStorage = useAgentStore((s) => s.clearAgentStorage);
-  const clearSessions = useSessionStore((s) => s.clearSessions);
+  const clearSessionStorage = useSessionStore((s) => s.clearSessionStorage);
   const { message, modal } = App.useApp();
 
   const handleClear = () => {
@@ -25,9 +25,10 @@ export default (props: Props) => {
       },
       okText: '确定',
       onOk: () => {
-        clearSessions();
-        clearAgentStorage();
-        message.success('清除成功');
+        clearSessionStorage();
+        clearAgentStorage().then(() => {
+          message.success('清除成功');
+        });
       },
       title: '确认清除所有会话消息?',
     });

src/features/Actions/Token.tsx

@@ -11,7 +11,7 @@ const Token = () => {
 
   return (
     <TokenTag
-      maxValue={OPENAI_MODEL_LIST.find((item) => item.name === config?.model)?.maxToken || 4096}
+      maxValue={OPENAI_MODEL_LIST.find((item) => item.id === config?.model)?.tokens || 4096}
       value={usedTokens}
       text={{ overload: 'Token 超出', remained: 'Token 剩余', used: 'Token 已使用' }}
     />

src/features/Actions/TokenMini.tsx

@@ -8,7 +8,7 @@ import { configSelectors, useSettingStore } from '@/store/setting';
 const TokenMini = () => {
   const config = useSettingStore((s) => configSelectors.currentOpenAIConfig(s), isEqual);
   const usedTokens = useCalculateToken();
-  const maxValue = OPENAI_MODEL_LIST.find((item) => item.name === config?.model)?.maxToken || 4096;
+  const maxValue = OPENAI_MODEL_LIST.find((item) => item.id === config?.model)?.tokens || 4096;
 
   return (
     <Tooltip title="上下文消耗 Token 数量计算，数字代表 {总计使用} / {总计可用}]">

src/features/Actions/UnSubscribeButton.tsx

@@ -6,7 +6,7 @@ import { useSessionStore } from '@/store/session';
 
 export default () => {
   const currentAgent = useAgentStore((s) => agentSelectors.currentAgentItem(s));
-  const unsubscribe = useAgentStore((s) => s.unsubscribe);
+  const removeLocalAgent = useAgentStore((s) => s.removeLocalAgent);
   const removeSession = useSessionStore((s) => s.removeSession);
 
   return (
@@ -17,7 +17,7 @@ export default () => {
       okText="确定"
       onConfirm={() => {
         if (!currentAgent) return;
-        unsubscribe(currentAgent.agentId);
+        removeLocalAgent(currentAgent.agentId);
         removeSession(currentAgent.agentId);
       }}
       title="取消订阅？"

src/features/AgentViewer/Viewer.tsx

@@ -0,0 +1,39 @@
+import React, { memo, useCallback } from 'react';
+
+import PageLoading from '@/components/PageLoading';
+import { useGlobalStore } from '@/store/global';
+
+import { useStyles } from './style';
+
+interface Props {
+  vrmUrl: string;
+}
+
+function Viewer(props: Props) {
+  const { vrmUrl } = props;
+  const { styles } = useStyles();
+  const [loading, setLoading] = React.useState(false);
+  const viewer = useGlobalStore((s) => s.viewer);
+
+  const canvasRef = useCallback(
+    (canvas: HTMLCanvasElement) => {
+      if (canvas) {
+        viewer.setup(canvas);
+        setLoading(true);
+        viewer.loadVrm(vrmUrl).then(() => {
+          setLoading(false);
+        });
+      }
+    },
+    [viewer, vrmUrl],
+  );
+
+  return (
+    <>
+      {loading ? <PageLoading className={styles.loading} title="模型加载中，请稍后..." /> : null}
+      <canvas ref={canvasRef} className={styles.canvas}></canvas>
+    </>
+  );
+}
+
+export default memo(Viewer);