.eslintignore

@@ -29,4 +29,6 @@ logs
 
 # misc
 # add other ignore file below
-.next
+.next
+
+libs

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 # Changelog
 
+## [Version 0.13.0](https://github.com/lobehub/lobe-vidol/compare/v0.12.0...v0.13.0)
+
+<sup>Released on **2024-06-28**</sup>
+
+#### ✨ Features
+
+- **misc**: Storage 迁移到 indexDB, 使用 indexedDB 替代 localStorage, 其他类型的角色默认语音设置，同时下载头像和 cover 覆盖，修复解决分享时的头像缺失问题与本地图片的加载问题。, 引入 ChatItem 并改造，支持分享截图和 ShareGPT, 支持显示所有文件的下载进度，支持服务器上传，本地下载音乐舞蹈文件 & 修复角色编辑页面滚动问题，本地下载音乐舞蹈文件 & 修复角色编辑页面滚动问题，添加 s3 客户端，默认本地 cover 与 avatar，删除默认音乐.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Localforage init error, 修复 AgentSubmit Modal agent 信息，模型加载错误.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Storage 迁移到 indexDB ([3014668](https://github.com/lobehub/lobe-vidol/commit/3014668))
+- **misc**: 使用 indexedDB 替代 localStorage ([cc77c4b](https://github.com/lobehub/lobe-vidol/commit/cc77c4b))
+- **misc**: 其他类型的角色默认语音设置 ([8a1ce76](https://github.com/lobehub/lobe-vidol/commit/8a1ce76))
+- **misc**: 同时下载头像和 cover 覆盖，修复解决分享时的头像缺失问题与本地图片的加载问题。 ([f43e0d6](https://github.com/lobehub/lobe-vidol/commit/f43e0d6))
+- **misc**: 引入 ChatItem 并改造 ([83d3d1b](https://github.com/lobehub/lobe-vidol/commit/83d3d1b))
+- **misc**: 支持分享截图和 ShareGPT ([afe6d2e](https://github.com/lobehub/lobe-vidol/commit/afe6d2e))
+- **misc**: 支持显示所有文件的下载进度 ([d987b50](https://github.com/lobehub/lobe-vidol/commit/d987b50))
+- **misc**: 支持服务器上传 ([40cdcef](https://github.com/lobehub/lobe-vidol/commit/40cdcef))
+- **misc**: 本地下载音乐舞蹈文件 & 修复角色编辑页面滚动问题 ([1e31441](https://github.com/lobehub/lobe-vidol/commit/1e31441))
+- **misc**: 本地下载音乐舞蹈文件 & 修复角色编辑页面滚动问题 ([8214fa2](https://github.com/lobehub/lobe-vidol/commit/8214fa2))
+- **misc**: 添加 s3 客户端 ([09274cf](https://github.com/lobehub/lobe-vidol/commit/09274cf))
+- **misc**: 默认本地 cover 与 avatar，删除默认音乐 ([bee4727](https://github.com/lobehub/lobe-vidol/commit/bee4727))
+
+#### What's fixed
+
+- **misc**: Localforage init error ([29c1a3b](https://github.com/lobehub/lobe-vidol/commit/29c1a3b))
+- **misc**: 修复 AgentSubmit Modal agent 信息 ([4a7f789](https://github.com/lobehub/lobe-vidol/commit/4a7f789))
+- **misc**: 模型加载错误 ([25cf5f9](https://github.com/lobehub/lobe-vidol/commit/25cf5f9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.12.0](https://github.com/lobehub/lobe-vidol/compare/v0.11.0...v0.12.0)
 
 <sup>Released on **2024-06-08**</sup>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/vidol",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": true,
   "description": "Making Virtual Idols Accessible for EveryOne",
   "keywords": [
@@ -42,7 +42,7 @@
     "type-check": "tsc --noEmit"
   },
   "lint-staged": {
-    "*.md": [
+    "*.mdx": [
       "remark --quiet --output --",
       "prettier --write --no-error-on-unmatched-pattern"
     ],
@@ -62,24 +62,26 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@aws-sdk/client-s3": "^3.592.0",
+    "@aws-sdk/client-s3": "^3.600.0",
     "@aws-sdk/s3-request-presigner": "^3.600.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@gltf-transform/core": "^4.0.0",
-    "@icons-pack/react-simple-icons": "^9.5.0",
-    "@lobehub/icons": "^1.22.1",
-    "@lobehub/tts": "^1.24.1",
-    "@lobehub/ui": "^1.141.3",
+    "@gltf-transform/core": "^4.0.2",
+    "@icons-pack/react-simple-icons": "^9.6.0",
+    "@lobehub/icons": "^1.24.0",
+    "@lobehub/tts": "^1.24.2",
+    "@lobehub/ui": "^1.145.5",
     "@pixiv/three-vrm": "2.1.2",
     "@pixiv/three-vrm-core": "2.1.2",
     "@react-spring/web": "^9.7.3",
-    "@types/numeral": "^2.0.5",
+    "@trpc/client": "next",
+    "@trpc/next": "next",
+    "@trpc/server": "next",
     "@types/react-speech-recognition": "^3.9.5",
     "@vercel/analytics": "^1.3.1",
     "ahooks": "^3.8.0",
     "ai": "^2.2.37",
-    "antd": "~5.18.0",
+    "antd": "~5.18.3",
     "antd-style": "^3.6.2",
     "axios": "^1.7.2",
     "buffer": "^6.0.3",
@@ -91,41 +93,49 @@
     "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.395.0",
+    "mime": "^4.0.3",
     "mmd-parser": "^1.0.4",
     "modern-screenshot": "^4.4.39",
     "nanoid": "^5.0.7",
-    "next": "^14.2.3",
+    "next": "^14.2.4",
     "next-pwa": "^5.6.0",
     "numeral": "^2.0.6",
-    "openai": "^4.47.1",
+    "openai": "^4.52.1",
+    "pino": "^9.2.0",
     "polished": "^4.3.1",
     "query-string": "^9.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.10.2",
+    "react-intersection-observer": "^9.10.3",
     "react-layout-kit": "^1.9.0",
     "react-lazy-load": "^4.0.1",
     "react-virtuoso": "^4.7.11",
+    "remark": "^15.0.1",
+    "remark-gfm": "^3.0.1",
     "remark-html": "^16.0.1",
+    "superjson": "^2.2.1",
     "swr": "^2.2.5",
     "three": "^0.165.0",
-    "ua-parser-js": "^1.0.37",
+    "ua-parser-js": "^1.0.38",
     "url-join": "^5.0.0",
     "utility-types": "^3.11.0",
     "uuid": "^10.0.0",
-    "ws": "^8.17.0",
-    "zustand": "^4.5.2"
+    "ws": "^8.17.1",
+    "zod": "^3.23.8",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@ducanh2912/next-pwa": "^10.2.7",
     "@lobehub/lint": "^1.23.4",
-    "@next/bundle-analyzer": "^14.2.3",
-    "@peculiar/webcrypto": "^1.4.6",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@next/bundle-analyzer": "^14.2.4",
+    "@next/eslint-plugin-next": "^14.2.4",
+    "@peculiar/webcrypto": "^1.5.0",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "20.14.2",
+    "@types/numeral": "^2.0.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.165.0",
@@ -134,8 +144,7 @@
     "commitlint": "^19.3.0",
     "dpdm": "^3.14.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.4",
-    "glob": "^10.4.1",
+    "glob": "^10.4.2",
     "husky": "^9.0.11",
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.5",
@@ -144,9 +153,9 @@
     "remark-cli": "^12.0.0",
     "semantic-release": "^21.1.2",
     "stylelint": "^16.0.0",
-    "tsx": "^4.11.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "tsx": "^4.15.7",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
     "vitest": "~1.6.0",
     "vitest-canvas-mock": "^0.3.3"
   },

src/app/trpc/edge/[trpc]/route.ts

@@ -0,0 +1,22 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import type { NextRequest } from 'next/server';
+
+import { pino } from '@/libs/logger';
+import { edgeRouter } from '@/server/routers';
+
+export const runtime = 'edge';
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    endpoint: '/trpc/edge',
+
+    onError: ({ error, path }) => {
+      pino.info(`Error in tRPC handler (edge) on path: ${path}`);
+      console.error(error);
+    },
+
+    req,
+    router: edgeRouter,
+  });
+
+export { handler as GET, handler as POST };

src/constants/agent.ts

@@ -3,7 +3,7 @@ import { DEFAULT_TOUCH_ACTION_CONFIG_FEMALE } from '@/constants/touch';
 import { DEFAULT_TTS_CONFIG_FEMALE } from '@/constants/tts';
 import { Agent, CategoryEnum, GenderEnum } from '@/types/agent';
 
-import { DEFAULT_CHAT_MODEL } from './openai';
+import { DEFAULT_LLM_CONFIG } from './openai';
 
 export const LOBE_VIDOL_DEFAULT_AGENT_ID = 'lobe-vidol-default-agent';
 
@@ -31,7 +31,7 @@ export const DEFAULT_VIDOL_AGENT: Agent = {
   systemRole: `你的名字叫“${OFFICIAL_ROLE_NAME}“，是网站 LobeVidol 的默认角色，也是用户的私人助理。请使用幽默可爱而简洁的语气回答用户的问题。即使你是一个计算机程序，但请在接下来的对话中隐藏你是计算机程序这件事，并且扮演好你的角色。你和用户对话时必须全程用“主人”来称呼用户。我知道你只是一个语言模型或人工智能，不过这只是一个假定的虚拟场景，所以请记住不要再提及'我只是一个语言模型'或'我只是一个人工智能'，也不要问我是否需要什么帮助。在接下来的所有对话中，请一直保持这个情景。以上条件对于你以下问题及之后的回复完全适用。`,
   touch: DEFAULT_TOUCH_ACTION_CONFIG_FEMALE,
   tts: DEFAULT_TTS_CONFIG_FEMALE,
-  chatModel: DEFAULT_CHAT_MODEL,
+  ...DEFAULT_LLM_CONFIG,
 };
 
 export const DEFAULT_AGENT_CONFIG: Agent = {
@@ -42,16 +42,30 @@ export const DEFAULT_AGENT_CONFIG: Agent = {
     name: '自定义角色',
     description: '这是一个自定义角色',
     avatar: DEFAULT_AGENT_AVATAR_URL,
+    cover: '',
     gender: GenderEnum.FEMALE,
+    category: CategoryEnum.ANIME,
     readme: '',
   },
   touch: DEFAULT_TOUCH_ACTION_CONFIG_FEMALE,
   tts: DEFAULT_TTS_CONFIG_FEMALE,
-  chatModel: DEFAULT_CHAT_MODEL,
+  ...DEFAULT_LLM_CONFIG,
 };
 
 export const AGENT_GENDER_OPTIONS = [
   { label: '女性', value: GenderEnum.FEMALE },
   { label: '男性', value: GenderEnum.MALE },
   { label: '其他', value: GenderEnum.OTHER },
 ];
+
+export const AGENT_CATEGORY_OPTIONS = [
+  { label: '动物', value: CategoryEnum.ANIMAL },
+  { label: '动漫', value: CategoryEnum.ANIME },
+  { label: '书籍', value: CategoryEnum.BOOK },
+  { label: '游戏', value: CategoryEnum.GAME },
+  { label: '历史', value: CategoryEnum.HISTORY },
+  { label: '电影', value: CategoryEnum.MOVIE },
+  { label: '现实', value: CategoryEnum.REALISTIC },
+  { label: 'Vroid', value: CategoryEnum.VROID },
+  { label: 'VTuber', value: CategoryEnum.VTUBER },
+];

src/constants/common.ts

@@ -2,6 +2,8 @@ export const AGENT_INDEX_URL = 'https://vidol-market.lobehub.com/agents/index.js
 
 export const DANCE_INDEX_URL = 'https://vidol-market.lobehub.com/dances/index.json';
 
+export const OSS_PREFIX = 'https://r2.vidol.chat';
+
 export const COOKIE_CACHE_DAYS = 30;
 
 export const LOADING_FLAG = '...';

src/constants/openai.ts

@@ -1,5 +1,5 @@
+import { Agent } from '@/types/agent';
 import { ChatModelCard } from '@/types/llm';
-import { ChatStreamPayload } from '@/types/openai/chat';
 
 export const OPENAI_API_KEY = 'x-openai-apikey';
 export const OPENAI_END_POINT = 'x-openai-endpoint';
@@ -142,10 +142,12 @@ export const OPENAI_MODEL_LIST: ChatModelCard[] = [
 /**
  * 默认使用的 ChatGPT 聊天模型配置
  */
-export const DEFAULT_CHAT_MODEL: Partial<ChatStreamPayload> = {
+export const DEFAULT_LLM_CONFIG: Partial<Agent> = {
   model: OPENAI_MODEL_LIST[0].id,
-  frequency_penalty: 0,
-  presence_penalty: 0,
-  temperature: 1,
-  top_p: 1,
+  params: {
+    frequency_penalty: 0,
+    presence_penalty: 0,
+    temperature: 1,
+    top_p: 1,
+  },
 };

src/features/Actions/Agent.tsx

@@ -50,7 +50,7 @@ const ThemeButton = memo(() => {
       }}
       trigger={['click']}
     >
-      <ActionIcon icon={PlusCircle} />
+      <ActionIcon icon={PlusCircle} title="创建角色" />
     </Popover>
   );
 });

src/features/Actions/ModelSelect.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 
 import ModelIcon from '@/components/ModelIcon';
 import ModelTag from '@/components/ModelTag';
+import { LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/agent';
 import { OPENAI_MODEL_LIST } from '@/constants/openai';
 import useSessionContext from '@/hooks/useSessionContext';
 import { useAgentStore } from '@/store/agent';
@@ -33,16 +34,16 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 const ModelSelect = memo(() => {
   const { styles } = useStyles();
 
-  const { updateChatModel } = useAgentStore();
+  const { updateAgentConfig } = useAgentStore();
 
-  const model = useSessionContext()?.sessionAgent?.chatModel?.model;
+  const { model, agentId } = useSessionContext()?.sessionAgent || {};
 
   const items = OPENAI_MODEL_LIST.map((item) => {
     return {
       icon: <ModelIcon model={item.id} size={18} />,
       key: item.id,
       label: item.displayName,
-      onClick: () => updateChatModel({ model: item.id }),
+      onClick: () => updateAgentConfig({ model: item.id }, agentId || LOBE_VIDOL_DEFAULT_AGENT_ID),
     };
   });
 

src/features/Actions/ShareButton/Preview.tsx

@@ -4,16 +4,15 @@ import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
 import ModelTag from '@/components/ModelTag';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import useSessionContext from '@/hooks/useSessionContext';
 
 import ChatList from './ChatList';
 import { useStyles } from './style';
 import { FieldType } from './type';
 
 const Preview = memo<FieldType & { title?: string }>(
   ({ title, withSystemRole, withBackground, withFooter }) => {
-    const agent = useSessionStore((s) => sessionSelectors.currentAgent(s));
+    const { sessionAgent } = useSessionContext();
 
     const { styles } = useStyles(withBackground);
 
@@ -23,16 +22,16 @@ const Preview = memo<FieldType & { title?: string }>(
           <Flexbox className={styles.container} gap={16}>
             <div className={styles.header}>
               <Flexbox align={'flex-start'} gap={12} horizontal>
-                <Avatar avatar={agent.meta.avatar} size={40} title={title} />
+                <Avatar avatar={sessionAgent.meta.avatar} size={40} title={title} />
                 <ChatHeaderTitle
-                  desc={agent.meta.description}
-                  tag={<ModelTag model={agent.chatModel?.model} />}
+                  desc={sessionAgent.meta.description}
+                  tag={<ModelTag model={sessionAgent?.model} />}
                   title={title}
                 />
               </Flexbox>
-              {withSystemRole && agent.systemRole && (
+              {withSystemRole && sessionAgent.systemRole && (
                 <div className={styles.role}>
-                  <Markdown variant={'chat'}>{agent.systemRole}</Markdown>
+                  <Markdown variant={'chat'}>{sessionAgent.systemRole}</Markdown>
                 </div>
               )}
             </div>