From e0d05a38958ea54319fe937efbe3e462855b7c9a Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 29 May 2024 18:32:03 +0800
Subject: [PATCH] fix: if the conversation name is too long, it will overflow
 the current item. #607 (#972)

### What problem does this PR solve?

fix: if the conversation name is too long, it will overflow the current
item. #607

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/chat/index.less |  1 +
 web/src/pages/chat/index.tsx  | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/chat/index.less b/web/src/pages/chat/index.less
index 7372f5e11..e48798325 100644
--- a/web/src/pages/chat/index.less
+++ b/web/src/pages/chat/index.less
@@ -8,6 +8,7 @@
 
     .chatAppContent {
       overflow-y: auto;
+      width: 100%;
     }
 
     .chatAppCard {
diff --git a/web/src/pages/chat/index.tsx b/web/src/pages/chat/index.tsx
index 14557e25c..51ee878be 100644
--- a/web/src/pages/chat/index.tsx
+++ b/web/src/pages/chat/index.tsx
@@ -17,6 +17,7 @@ import {
   Space,
   Spin,
   Tag,
+  Typography,
 } from 'antd';
 import { MenuItemProps } from 'antd/lib/menu/MenuItem';
 import classNames from 'classnames';
@@ -46,6 +47,8 @@ import { IDialog } from '@/interfaces/database/chat';
 import ChatOverviewModal from './chat-overview-modal';
 import styles from './index.less';
 
+const { Text } = Typography;
+
 const Chat = () => {
   const dialogList = useSelectFirstDialogOnMount();
   const { onRemoveDialog } = useDeleteDialog();
@@ -260,7 +263,14 @@ const Chat = () => {
                     <Space size={15}>
                       <Avatar src={x.icon} shape={'square'} />
                       <section>
-                        <b>{x.name}</b>
+                        <b>
+                          <Text
+                            ellipsis={{ tooltip: x.name }}
+                            style={{ width: 130 }}
+                          >
+                            {x.name}
+                          </Text>
+                        </b>
                         <div>{x.description}</div>
                       </section>
                     </Space>
@@ -315,7 +325,14 @@ const Chat = () => {
                   })}
                 >
                   <Flex justify="space-between" align="center">
-                    <div>{x.name}</div>
+                    <div>
+                      <Text
+                        ellipsis={{ tooltip: x.name }}
+                        style={{ width: 150 }}
+                      >
+                        {x.name}
+                      </Text>
+                    </div>
                     {conversationActivated === x.id && x.id !== '' && (
                       <section>
                         <Dropdown