add edit icon alongside title

Signed-off-by: cbh778899 <[email protected]>

Author: cbh778899

src/components/chat/Conversation.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import ConversationBubble from "./ConversationBubble";
-import { CheckCircle, FileImageFill, FileTextFill, Paperclip, Send, StopCircleFill, XCircle } from 'react-bootstrap-icons';
+import { CheckCircle, FileImageFill, FileTextFill, Paperclip, PencilFill, Send, StopCircleFill, XCircle } from 'react-bootstrap-icons';
 import useIDB from "../../utils/idb";
 import { isModelLoaded, loadModel } from '../../utils/workers/worker'
 import { getCompletionFunctions } from "../../utils/workers";
@@ -167,7 +167,10 @@ export default function Conversation({ uid, title, updateTitle, client, updateCl
                             <CheckCircle className="btn clickable" onClick={submitUpdateTitle} />
                             <XCircle className="btn clickable" onClick={()=>{setEditedTitle(title); toggleEditTitle(false)}} />
                         </form>:
-                        <div className="text" onClick={()=>toggleEditTitle(true)}>{ title }</div>
+                        <div className="display-title clickable" onClick={()=>toggleEditTitle(true)}>
+                            <div className="text">{ title }</div>
+                            <PencilFill className="edit-icon" />
+                        </div>
                     }
                 </div>
                 <div className="bubbles" ref={bubblesRef}>

src/styles/chat.css

@@ -152,10 +152,22 @@
     font-size: 15px;
     font-weight: bold;
     color: rgb(50, 50, 50);
+    align-content: center;
 
     --elem-height: calc(var(--title-bar-height) - 14px);
 }
 
+.chat > .conversation-main > .title-bar .display-title {
+    width: fit-content;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.chat > .conversation-main > .title-bar .display-title > .edit-icon {
+    margin-left: 10px;
+}
+
 .chat > .conversation-main > .title-bar > form {
     display: flex;
 }