fix: Fix the issue of squeezed avatars in the conversation list.

LTopx · Aug 13, 2023 · 9fba3b8 · 9fba3b8 · vercel · Aug 13, 2023
1 parent 6c4b020
commit 9fba3b8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
@@ -9,6 +9,7 @@
 - Fixed mobile session content obscuring the bottom input box
 - Refactored function calling invocation logic and fixed bugs
 - Fixed the "drift" of the drop-down selection box when selecting a new session model
+- Fix the issue of squeezed avatars in the conversation list.
 
 ### Add
 

diff --git a/CHANGE_LOG.zh_CN.md b/CHANGE_LOG.zh_CN.md
@@ -9,6 +9,7 @@
 - 修复移动端会话内容遮挡底部输入框的问题
 - 重构 function calling 的调用逻辑，修复 bug
 - 修复新会话选择模型时，下拉选择框出现“漂移”的情况
+- 修复会话列表头像被挤压的问题
 
 ### 新增
 

diff --git a/src/components/chatSection/chatList/avatar.tsx b/src/components/chatSection/chatList/avatar.tsx
@@ -19,10 +19,13 @@ function renderAssistantIcon(model?: ChannelModel) {
   if (type === "openai") {
     return (
       <div
-        className={cn("rounded-full flex h-8 w-8 justify-center items-center", {
-          "bg-[#20a37f]": name.startsWith("gpt-3"),
-          "bg-[#a26bf7]": name.startsWith("gpt-4"),
-        })}
+        className={cn(
+          "rounded-full flex flex-shrink-0 h-8 w-8 justify-center items-center",
+          {
+            "bg-[#20a37f]": name.startsWith("gpt-3"),
+            "bg-[#a26bf7]": name.startsWith("gpt-4"),
+          }
+        )}
       >
         <div className="h-8 w-8 flex justify-center items-center">
           <Icon icon="openai" size={20} className="text-white" />
@@ -32,7 +35,7 @@ function renderAssistantIcon(model?: ChannelModel) {
   }
   if (type === "azure") {
     return (
-      <div className="rounded-full flex bg-sky-200/70 h-8 w-8 justify-center items-center">
+      <div className="rounded-full flex flex-shrink-0 bg-sky-200/70 h-8 w-8 justify-center items-center">
         <div className="h-8 w-8 flex justify-center items-center">
           <Icon icon="azure" size={20} className="text-white" />
         </div>
@@ -42,7 +45,7 @@ function renderAssistantIcon(model?: ChannelModel) {
   if (type === "openRouter") {
     if (model.name.includes("anthropic")) {
       return (
-        <div>
+        <div className="w-8 h-8 flex-shrink-0">
           <Image
             className="rounded-full"
             src="/claude.webp"
@@ -55,14 +58,14 @@ function renderAssistantIcon(model?: ChannelModel) {
     }
     if (model.name.includes("google/palm")) {
       return (
-        <div className="bg-neutral-200 dark:bg-neutral-600 flex h-8 w-8 rounded-full justify-center items-center">
+        <div className="bg-neutral-200 dark:bg-neutral-600 flex flex-shrink-0 h-8 w-8 rounded-full justify-center items-center">
           <Image src="/palm.webp" alt="PaLM" width={28} height={28} />
         </div>
       );
     }
     if (model.name.includes("meta-llama")) {
       return (
-        <div className="bg-neutral-200 dark:bg-neutral-600 flex h-8 w-8 rounded-full justify-center items-center">
+        <div className="bg-neutral-200 dark:bg-neutral-600 flex flex-shrink-0 h-8 w-8 rounded-full justify-center items-center">
           🦙
         </div>
       );
@@ -85,7 +88,7 @@ export default function Avatar(props: AvatarProps) {
     return (
       <div
         className={cn(
-          "rounded-full flex h-8 w-8 justify-center items-center",
+          "rounded-full flex h-8 w-8 flex-shrink-0 justify-center items-center",
           "bg-black/25 dark:bg-slate-50"
         )}
       >