Refined UI,code logic for improved user experience

app/components/chat-list.tsx

@@ -1,4 +1,6 @@
 import DeleteIcon from "../icons/delete.svg";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPen } from '@fortawesome/free-solid-svg-icons'
 import BotIcon from "../icons/bot.svg";
 
 import styles from "./home.module.scss";
@@ -20,6 +22,7 @@ import { useRef, useEffect } from "react";
 
 export function ChatItem(props: {
   onClick?: () => void;
+  onRename?: () => void;
   onDelete?: () => void;
   title: string;
   count: number;
@@ -77,6 +80,14 @@ export function ChatItem(props: {
             </>
           )}
 
+          <div
+            className={styles["chat-item-rename"]}
+            onClickCapture={props.onRename}
+          >
+            {/* <RenameIcon /> */}
+            <FontAwesomeIcon icon={faPen} />
+          </div>
+
           <div
             className={styles["chat-item-delete"]}
             onClickCapture={props.onDelete}