From a609c36d471dbfaf2be161e67c87281ed67dc911 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sun, 16 Apr 2023 15:17:17 +0800
Subject: [PATCH] Model avatar (#119)

* update
---
 .../chat/components/Avatar/MessageAvatar.vue  | 21 ++++++++
 .../chat/components/Avatar/ModelAvatar.vue    | 28 ++++++++++
 .../views/chat/components/Message/Avatar.vue  | 53 -------------------
 .../views/chat/components/Message/index.vue   |  2 +-
 .../chat/components/Session/SessionConfig.vue | 16 ++----
 web/src/views/chat/layout/sider/List.vue      |  3 +-
 6 files changed, 56 insertions(+), 67 deletions(-)
 create mode 100644 web/src/views/chat/components/Avatar/MessageAvatar.vue
 create mode 100644 web/src/views/chat/components/Avatar/ModelAvatar.vue
 delete mode 100644 web/src/views/chat/components/Message/Avatar.vue

diff --git a/web/src/views/chat/components/Avatar/MessageAvatar.vue b/web/src/views/chat/components/Avatar/MessageAvatar.vue
new file mode 100644
index 00000000..98e14b6f
--- /dev/null
+++ b/web/src/views/chat/components/Avatar/MessageAvatar.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { NAvatar } from 'naive-ui'
+import ModelAvatar from './ModelAvatar.vue'
+import defaultAvatar from '@/assets/avatar.jpg'
+
+interface Props {
+  inversion?: boolean
+  model?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <template v-if="inversion">
+    <NAvatar round :src="defaultAvatar" />
+  </template>
+  <span v-else class="text-[28px] dark:text-white">
+    <ModelAvatar :model="model" />
+  </span>
+</template>
diff --git a/web/src/views/chat/components/Avatar/ModelAvatar.vue b/web/src/views/chat/components/Avatar/ModelAvatar.vue
new file mode 100644
index 00000000..bf9b7170
--- /dev/null
+++ b/web/src/views/chat/components/Avatar/ModelAvatar.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { SvgIcon } from '@/components/common'
+
+// polished version of question:
+// Create a Vue 3 <script setup lang="ts"> single file component with a model prop
+defineProps({
+  model: String,
+})
+</script>
+
+<template>
+  <div>
+    <template v-if="model === 'claude-v1'">
+      <SvgIcon icon="eos-icons:ai" color="brown" />
+    </template>
+    <template v-if="model === 'claude-instant-v1'">
+      <SvgIcon icon="simple-icons:fastapi" color="brown" />
+    </template>
+    <template v-if="model?.startsWith('gpt')">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
+        <path
+          d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z"
+          fill="currentColor"
+        />
+      </svg>
+    </template>
+  </div>
+</template>
diff --git a/web/src/views/chat/components/Message/Avatar.vue b/web/src/views/chat/components/Message/Avatar.vue
deleted file mode 100644
index 6803347c..00000000
--- a/web/src/views/chat/components/Message/Avatar.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import { NAvatar } from 'naive-ui'
-import defaultAvatar from '@/assets/avatar.jpg'
-
-interface Props {
-  inversion?: boolean
-  model?: string
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <template v-if="inversion">
-    <NAvatar round :src="defaultAvatar" />
-  </template>
-  <span v-else class="text-[28px] dark:text-white">
-    <template v-if="model === 'claude-v1'">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
-        <path
-          d="M32.73 0h-6.945L38.45 32h6.945L32.73 0ZM12.665 0 0 32h7.082l2.59-6.72h13.25l2.59 6.72h7.082L19.929 0h-7.264Zm-.702 19.337 4.334-11.246 4.334 11.246h-8.668Z"
-          fill="brown" />
-      </svg>
-    </template>
-
-    <template v-if="model === 'claude-instant-v1'">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <path fill="currentColor"
-          d="M16.5 5.5a2 2 0 0 0 2-2a2 2 0 0 0-2-2a2 2 0 0 0-2 2a2 2 0 0 0 2 2m-3.6 13.9l1-4.4l2.1 2v6h2v-7.5l-2.1-2l.6-3A7.298 7.298 0 0 0 22 13v-2c-1.76.03-3.4-.89-4.3-2.4l-1-1.6c-.36-.6-1-1-1.7-1c-.3 0-.5.1-.8.1L9 8.3V13h2V9.6l1.8-.7l-1.6 8.1l-4.9-1l-.4 2l7 1.4M4 9a1 1 0 0 1-1-1a1 1 0 0 1 1-1h3v2H4m1-4a1 1 0 0 1-1-1a1 1 0 0 1 1-1h5v2H5m-2 8a1 1 0 0 1-1-1a1 1 0 0 1 1-1h4v2H3Z" />
-      </svg>
-    </template>
-
-    <template v-if="model === 'claude-v1.2'">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <path d="M6 17v-3H3v-2h3V9h2v3h3v2H8v3H6Zm9.75 2V8.05l-2.3 1.65l-1.15-1.75L16.4 5H18v14h-2.25Z"
-          fill="currentColor" />
-      </svg>
-    </template>
-    <template v-if="model === 'claude-v1.3'">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <path
-          d="M6 17v-3H3v-2h3V9h2v3h3v2H8v3H6Zm6.1 2v-2.1l5-5.1q.825-.875 1.163-1.463T18.6 9q0-.725-.563-1.313T16.35 7.1q-.9 0-1.488.5t-.812 1.3l-2-.8q.35-1.125 1.45-2.113T16.4 5q2.075 0 3.238 1.188T20.8 9q0 1.125-.525 2.05T18.65 13.1L15 16.9l.05.1H21v2h-8.9Z"
-          fill="currentColor" />
-      </svg>
-    </template>
-    <template v-if="model?.startsWith('gpt')">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
-        <path
-          d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z"
-          fill="currentColor" />
-      </svg></template>
-  </span>
-</template>
diff --git a/web/src/views/chat/components/Message/index.vue b/web/src/views/chat/components/Message/index.vue
index e307008a..e57aa2c2 100644
--- a/web/src/views/chat/components/Message/index.vue
+++ b/web/src/views/chat/components/Message/index.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
 import { NDropdown } from 'naive-ui'
-import AvatarComponent from './Avatar.vue'
+import AvatarComponent from '../Avatar/MessageAvatar.vue'
 import TextComponent from './Text.vue'
 import { SvgIcon } from '@/components/common'
 import { copyText } from '@/utils/format'
diff --git a/web/src/views/chat/components/Session/SessionConfig.vue b/web/src/views/chat/components/Session/SessionConfig.vue
index 93cb47a9..aa1e3e3f 100644
--- a/web/src/views/chat/components/Session/SessionConfig.vue
+++ b/web/src/views/chat/components/Session/SessionConfig.vue
@@ -63,14 +63,6 @@ const chatModelOptions = [
     label: 'claude-instant(small,fast)',
     value: 'claude-instant-v1',
   },
-  {
-    label: 'claude-v1.2 (slightly better than v1)',
-    value: 'claude-v1.2',
-  },
-  {
-    label: 'claude-v1.3 (better than v1, code, non-english)',
-    value: 'claude-v1.3',
-  },
   {
     label: 'gpt-4(chatgpt)',
     value: 'gpt-4',
@@ -120,9 +112,9 @@ const chatModelOptions = [
       </NFormItem>
     </NForm>
     <!--
-                      <div class="center">
-                        <pre>{{ JSON.stringify(modelRef, null, 2) }} </pre>
-                      </div>
-                      -->
+                        <div class="center">
+                          <pre>{{ JSON.stringify(modelRef, null, 2) }} </pre>
+                        </div>
+                        -->
   </div>
 </template>
diff --git a/web/src/views/chat/layout/sider/List.vue b/web/src/views/chat/layout/sider/List.vue
index cf33b26f..855ffba5 100644
--- a/web/src/views/chat/layout/sider/List.vue
+++ b/web/src/views/chat/layout/sider/List.vue
@@ -5,6 +5,7 @@ import { renameChatSession } from '@/api'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import ModelAvatar from '@/views/chat/components/Avatar/ModelAvatar.vue'
 import { t } from '@/locales'
 
 const { isMobile } = useBasicLayout()
@@ -91,7 +92,7 @@ function isActive(uuid: string) {
             @click="handleSelect(item)"
           >
             <span>
-              <SvgIcon icon="ri:message-3-line" />
+              <ModelAvatar :model="item.model" />
             </span>
             <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
               <NInput