From 7cd47f60e1ab9721a47379270ca831ab86ef81f5 Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 17:40:30 +1000
Subject: [PATCH 1/7] callback after stream finished

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/utils/workers/openai-worker.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/workers/openai-worker.js b/src/utils/workers/openai-worker.js
index 0eb0c26..99ff0e1 100644
--- a/src/utils/workers/openai-worker.js
+++ b/src/utils/workers/openai-worker.js
@@ -96,6 +96,7 @@ export async function chatCompletions(messages, cb = null) {
             if(chunk.choices[0].finish_reason) break;
             if(abort_signal) break;
         }
+        cb && cb(response_text, true);
     } catch(error) {
         console.error(error);
         cb && cb(`**${error.name}**:\n\`\`\`\n${error.message}\n\`\`\``, true);

From 9ad5fc6f3c4ebaa4eefbf10fadc5f87beff8fef6 Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 17:40:56 +1000
Subject: [PATCH 2/7] do not store session to idb, this will fail everytime

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/components/chat/index.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/chat/index.jsx b/src/components/chat/index.jsx
index 51ce95f..2320190 100644
--- a/src/components/chat/index.jsx
+++ b/src/components/chat/index.jsx
@@ -1,13 +1,11 @@
 import { useState } from "react";
 import Tickets from "./Tickets";
 import Conversation from "./Conversation";
-import useIDB from "../../utils/idb";
 
 export default function Chat() {
 
     const [chat, selectChat] = useState({});
     const [history, setHistory] = useState([]);
-    const idb = useIDB();
 
     function updateChatClient(client) {
         selectChat({
@@ -19,8 +17,6 @@ export default function Chat() {
             history_cp.findIndex(e=>e.uid === chat.uid)
         ].client = client;
         setHistory(history_cp);
-
-        idb.updateOne('chat-history', {client}, [{uid:chat.uid}])
     }
 
     return (

From 3ffd1da27f882f7f5fc384626fdda35165e39913 Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 17:41:33 +1000
Subject: [PATCH 3/7] specify if there's an empty message

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/components/chat/Conversation.jsx       | 14 ++++----------
 src/components/chat/ConversationBubble.jsx |  6 +++---
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/chat/Conversation.jsx b/src/components/chat/Conversation.jsx
index 4ad1894..5559b39 100644
--- a/src/components/chat/Conversation.jsx
+++ b/src/components/chat/Conversation.jsx
@@ -53,7 +53,6 @@ export default function Conversation({ uid, client, updateClient }) {
             if(!isFinished) {
                 setPendingMessage(text);
             } else {
-                setPendingMessage('');
                 setConversation([
                     ...conversation, user_msg,
                     { role: 'assistant', content: text }
@@ -67,7 +66,6 @@ export default function Conversation({ uid, client, updateClient }) {
                 idb.updateOne(
                     'chat-history', {updatedAt: Date.now()}, [{uid}]
                 )
-                setHidePending(true);
             }
         }
 
@@ -106,13 +104,9 @@ export default function Conversation({ uid, client, updateClient }) {
             ]
         }
 
-        const result = await chat_functions.current.completions(messages, cb);
-        if(!result) {
-            setPendingMessage('');
-            setHidePending(true);
-        } else {
-            console.log(result)
-        }
+        await chat_functions.current.completions(messages, cb);
+        setPendingMessage('');
+        setHidePending(true);
     }
     
     useEffect(()=>{
@@ -163,7 +157,7 @@ export default function Conversation({ uid, client, updateClient }) {
                         }) }
                         <ConversationBubble
                             role={'assistant'} content={pending_message}
-                            hidden={hide_pending}
+                            hidden={hide_pending} special={true}
                         />
                     </div>
                     <form className="send-message-form" onSubmit={sendMessage}>
diff --git a/src/components/chat/ConversationBubble.jsx b/src/components/chat/ConversationBubble.jsx
index ebffa5a..b6fc753 100644
--- a/src/components/chat/ConversationBubble.jsx
+++ b/src/components/chat/ConversationBubble.jsx
@@ -1,12 +1,12 @@
 import { CircleFill } from "react-bootstrap-icons"
 import Markdown from "react-markdown"
 
-export default function ConversationBubble({role, content, hidden}) {
+export default function ConversationBubble({role, content, hidden, special}) {
     return (
         <div className={`bubble ${role}${hidden?' hidden':""}`}>
             {
-                content ?
-                <Markdown>{ content }</Markdown> :
+                content || !special?
+                <Markdown>{ content || "**[ EMPTY MESSAGE ]**" }</Markdown> :
                 <>
                 <CircleFill className="dot-animation" />
                 <CircleFill className="dot-animation" />

From f12ceacfd9ba07eb8fa6b5d65662da7694d31fdc Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 19:24:03 +1000
Subject: [PATCH 4/7] remove client attribute

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/utils/idb/settings.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/utils/idb/settings.js b/src/utils/idb/settings.js
index 17bf3de..47c3a2b 100644
--- a/src/utils/idb/settings.js
+++ b/src/utils/idb/settings.js
@@ -31,12 +31,5 @@ export const versions = [
                 { name: 'json' }
             ]
         }
-    },
-    {
-        'chat-history': {
-            columns: [
-                { 'name': "client" }
-            ]
-        }
     }
 ]
\ No newline at end of file

From bf150bc2cc2add6ebf00db77508c0e298c41db1d Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 19:24:13 +1000
Subject: [PATCH 5/7] update styles

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/styles/chat.css | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/styles/chat.css b/src/styles/chat.css
index dd9b4dc..428a338 100644
--- a/src/styles/chat.css
+++ b/src/styles/chat.css
@@ -7,6 +7,7 @@
     display: block;
 
     --tickets-width: 250px;
+    --ticket-height: 50px;
 }
 
 .chat > .tickets {
@@ -35,7 +36,7 @@
     background-color: var(--ticket-bg-color);
     width: 100%;
     padding: 0px 10px;
-    height: 50px;
+    height: var(--ticket-height);
     align-content: center;
     font-size: 16px;
     position: relative;
@@ -59,6 +60,46 @@
     background-image: linear-gradient(to right, transparent, var(--ticket-bg-color) 70%);
 }
 
+.chat > .tickets > .ticket > .delete-icon {
+    position: absolute;
+    right: 7px;
+    --size: calc(var(--ticket-height) * 0.3);
+    top: calc(var(--ticket-height) * 0.35);
+    width: var(--size);
+    height: var(--size);
+    z-index: 3;
+    color: gray;
+    display: none;
+}
+.chat > .tickets > .ticket:hover > .delete-icon {
+    display: block;
+}
+.chat > .tickets > .ticket:hover > .delete-icon:hover {
+    color: black;
+}
+
+.chat > dialog {
+    border: 2px solid black;
+    padding: 30px;
+    border-radius: 10px;
+    text-align: center;
+}
+.chat > dialog:focus {
+    outline: none;
+}
+
+.chat > dialog > .button {
+    border-bottom: 1px solid;
+    width: fit-content;
+    margin: auto;
+    margin-top: 7px;
+    padding: 0px 7px;
+    color: rgb(70, 70, 70);
+}
+.chat > dialog > .button:hover {
+    color: black;
+}
+
 .chat > .conversation-main {
     width: calc(100% - var(--tickets-width));
     position: absolute;

From 43bf848a0bd9d0238661f796efd8347ff1a365b7 Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 19:24:25 +1000
Subject: [PATCH 6/7] add delete session function

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/components/chat/Conversation.jsx | 78 ++++++++++++++--------------
 src/components/chat/Ticket.jsx       | 12 ++++-
 src/components/chat/Tickets.jsx      |  9 ++--
 src/components/chat/index.jsx        | 53 ++++++++++++++++++-
 4 files changed, 106 insertions(+), 46 deletions(-)

diff --git a/src/components/chat/Conversation.jsx b/src/components/chat/Conversation.jsx
index 5559b39..0fd7e06 100644
--- a/src/components/chat/Conversation.jsx
+++ b/src/components/chat/Conversation.jsx
@@ -146,48 +146,48 @@ export default function Conversation({ uid, client, updateClient }) {
             {
                 uid ? 
                 <>
-                    <div className="bubbles" ref={bubblesRef}>
-                        { conversation.map(({role, content}, idx) => {
-                            return (
-                                <ConversationBubble 
-                                    key={`conversation-history-${uid}-${idx}`} 
-                                    role={role} content={content} 
-                                />
-                            )
-                        }) }
-                        <ConversationBubble
-                            role={'assistant'} content={pending_message}
-                            hidden={hide_pending} special={true}
-                        />
-                    </div>
-                    <form className="send-message-form" onSubmit={sendMessage}>
-                        <div className="input-container">
-                            {
-                                chat_functions.current && chat_functions.current.platform !== 'Wllama' &&
-                                <div className="button-container file-upload">
-                                    {
-                                        upload_file ? 
-                                        upload_file.type.startsWith("image") ? 
-                                        <FileImageFill className="button-icon highlight" /> : <FileTextFill className="button-icon highlight" />:
-                                        <Paperclip className="button-icon" />
-                                    }
-                                    <input 
-                                        type="file" className="clickable" 
-                                        title={upload_file ? `Append file ${upload_file.name}` : "Select file to append"}
-                                        onChange={evt=>setUploadFile(evt.target.files.length ? evt.target.files[0] : null)} />
-                                </div>
-                            }
-                            <input type="text" value={message} onChange={messageOnChange}/>
-                            <div className="button-container">
-                                { 
-                                    hide_pending ? 
-                                    <Send className="button-icon animated" /> :
-                                    <StopCircleFill className="button-icon clickable" onClick={chat_functions.current.abort} />
+                <div className="bubbles" ref={bubblesRef}>
+                    { conversation.map(({role, content}, idx) => {
+                        return (
+                            <ConversationBubble 
+                                key={`conversation-history-${uid}-${idx}`} 
+                                role={role} content={content} 
+                            />
+                        )
+                    }) }
+                    <ConversationBubble
+                        role={'assistant'} content={pending_message}
+                        hidden={hide_pending} special={true}
+                    />
+                </div>
+                <form className="send-message-form" onSubmit={sendMessage}>
+                    <div className="input-container">
+                        {
+                            chat_functions.current && chat_functions.current.platform !== 'Wllama' &&
+                            <div className="button-container file-upload">
+                                {
+                                    upload_file ? 
+                                    upload_file.type.startsWith("image") ? 
+                                    <FileImageFill className="button-icon highlight" /> : <FileTextFill className="button-icon highlight" />:
+                                    <Paperclip className="button-icon" />
                                 }
-                                <input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
+                                <input 
+                                    type="file" className="clickable" 
+                                    title={upload_file ? `Append file ${upload_file.name}` : "Select file to append"}
+                                    onChange={evt=>setUploadFile(evt.target.files.length ? evt.target.files[0] : null)} />
                             </div>
+                        }
+                        <input type="text" value={message} onChange={messageOnChange}/>
+                        <div className="button-container">
+                            { 
+                                hide_pending ? 
+                                <Send className="button-icon animated" /> :
+                                <StopCircleFill className="button-icon clickable" onClick={chat_functions.current.abort} />
+                            }
+                            <input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
                         </div>
-                    </form>
+                    </div>
+                </form>
                 </> :
                 <div className="no-conversation">Please select a conversation or start a new one.</div>
             }
diff --git a/src/components/chat/Ticket.jsx b/src/components/chat/Ticket.jsx
index dd8afe8..9db8a9f 100644
--- a/src/components/chat/Ticket.jsx
+++ b/src/components/chat/Ticket.jsx
@@ -1,10 +1,20 @@
-export default function Ticket({ title, info, selectChat, is_selected }) {
+import { XLg } from "react-bootstrap-icons";
+
+export default function Ticket({ title, info, selectChat, is_selected, deleteHistory }) {
+
     return (
         <div 
             className={`ticket clickable${is_selected ? " selected":""}`} 
             onClick={()=>selectChat(info)}
         >
             { title }
+            <XLg 
+                className="delete-icon clickable" 
+                onClick={evt=>{
+                    evt.stopPropagation();
+                    deleteHistory({ uid: info.uid, title })
+                }} 
+            />
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/chat/Tickets.jsx b/src/components/chat/Tickets.jsx
index d91491b..2e019de 100644
--- a/src/components/chat/Tickets.jsx
+++ b/src/components/chat/Tickets.jsx
@@ -3,14 +3,14 @@ import Ticket from "./Ticket";
 import useIDB from "../../utils/idb";
 import { genRandomID } from "../../utils/tools";
 
-export default function Tickets({selectChat, current_chat, history, setHistory}) {
+export default function Tickets({selectChat, current_chat, history, setHistory, deleteHistory}) {
 
     const idb = useIDB();
 
     async function syncHistory() {
         const history = await idb.getAll('chat-history')
         history.sort((a, b)=>b.updatedAt - a.updatedAt)
-        setHistory(history)
+        setHistory(history.map(e=>{return {...e, client: null}}))
     }
 
     async function startNewConversation() {
@@ -27,7 +27,7 @@ export default function Tickets({selectChat, current_chat, history, setHistory})
         const new_conv_info = await idb.getByID('chat-history', conv_id);
         new_conv_info &&
         setHistory([
-            new_conv_info,
+            {...new_conv_info, client: null},
             ...history
         ])
         selectChat(new_conv_info)
@@ -50,9 +50,10 @@ export default function Tickets({selectChat, current_chat, history, setHistory})
                 const { title, uid } = elem;
                 return (
                     <Ticket 
-                        key={`ticket-${title}-${uid}`}
+                        key={`ticket-${uid}`}
                         title={title} info={elem}
                         selectChat={selectChat}
+                        deleteHistory={deleteHistory}
                         is_selected={current_chat.uid && uid === current_chat.uid}
                     />
                 )
diff --git a/src/components/chat/index.jsx b/src/components/chat/index.jsx
index 2320190..a6a3116 100644
--- a/src/components/chat/index.jsx
+++ b/src/components/chat/index.jsx
@@ -1,11 +1,16 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Tickets from "./Tickets";
 import Conversation from "./Conversation";
+import useIDB from "../../utils/idb";
 
 export default function Chat() {
 
     const [chat, selectChat] = useState({});
     const [history, setHistory] = useState([]);
+    const idb = useIDB();
+    const dialogRef = useRef(null);
+    const [showConfirm, toggleConfirm] = useState(false);
+    const [conv_to_delete, requestDelete] = useState(null);
 
     function updateChatClient(client) {
         selectChat({
@@ -19,10 +24,54 @@ export default function Chat() {
         setHistory(history_cp);
     }
 
+    function resetRequestDelete() {
+        requestDelete(null);
+        toggleConfirm(false);
+    }
+
+    async function deleteHistory() {
+        if(!conv_to_delete) return;
+
+        const {uid} = conv_to_delete;
+        await idb.deleteOne("chat-history", [{uid}]);
+        await idb.deleteAll("messages", [{'history-uid': uid}]);
+        setHistory(history.filter(e=>e.uid !== uid));
+        uid === chat.uid && selectChat({});
+        resetRequestDelete();
+    }
+
+    useEffect(()=>{
+        if(dialogRef.current) {
+            if(showConfirm) dialogRef.current.showModal();
+            else dialogRef.current.close();
+        }
+    }, [showConfirm])
+
+    useEffect(()=>{
+        conv_to_delete && toggleConfirm(true);
+    }, [conv_to_delete])
+
     return (
         <div className="chat">
-            <Tickets selectChat={selectChat} setHistory={setHistory} history={history} current_chat={chat} />
+            <Tickets 
+                selectChat={selectChat} current_chat={chat} 
+                setHistory={setHistory} history={history} 
+                deleteHistory={requestDelete}
+            />
             <Conversation uid={chat.uid} client={chat.client} updateClient={updateChatClient} />
+            <dialog ref={dialogRef}>
+                <div>
+                    Delete <strong>{conv_to_delete && conv_to_delete.title}</strong>?
+                </div>
+                <div
+                    className="button clickable"
+                    onClick={deleteHistory}
+                >Yes, Delete</div>
+                <div 
+                    className="button clickable"
+                    onClick={resetRequestDelete}
+                >No, Go Back</div>
+            </dialog>
         </div>
     )
 }
\ No newline at end of file

From 9dfe2caedb8f37ffb65eda2bb39cf7d901325a74 Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Tue, 17 Sep 2024 20:16:44 +1000
Subject: [PATCH 7/7] add update title function

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/components/chat/Conversation.jsx | 32 ++++++++++++++++++++---
 src/components/chat/index.jsx        | 20 ++++++++++++++-
 src/styles/chat.css                  | 38 ++++++++++++++++++++++++++--
 3 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/Conversation.jsx b/src/components/chat/Conversation.jsx
index 0fd7e06..8abdabb 100644
--- a/src/components/chat/Conversation.jsx
+++ b/src/components/chat/Conversation.jsx
@@ -1,19 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 import ConversationBubble from "./ConversationBubble";
-import { FileImageFill, FileTextFill, Paperclip, Send, StopCircleFill } from 'react-bootstrap-icons';
+import { CheckCircle, FileImageFill, FileTextFill, Paperclip, Send, StopCircleFill, XCircle } from 'react-bootstrap-icons';
 import useIDB from "../../utils/idb";
 import { isModelLoaded, loadModel } from '../../utils/workers/worker'
 import { getCompletionFunctions } from "../../utils/workers";
 import { setClient as setAwsClient } from "../../utils/workers/aws-worker";
 import { setClient as setOpenaiClient } from "../../utils/workers/openai-worker";
 
-export default function Conversation({ uid, client, updateClient }) {
+export default function Conversation({ uid, title, updateTitle, client, updateClient }) {
 
     const [conversation, setConversation] = useState([]);
     const [message, setMessage] = useState('');
     const [pending_message, setPendingMessage] = useState('');
     const [hide_pending, setHidePending] = useState(true);
     const [upload_file, setUploadFile] = useState(null);
+    const [edit_title, toggleEditTitle] = useState(false);
+    const [edited_title, setEditedTitle] = useState(title);
     const chat_functions = useRef(getCompletionFunctions());
     const idb = useIDB();
 
@@ -108,6 +110,13 @@ export default function Conversation({ uid, client, updateClient }) {
         setPendingMessage('');
         setHidePending(true);
     }
+
+    function submitUpdateTitle() {
+        if(edited_title && edited_title !== title) {
+            updateTitle(edited_title);
+        }
+        toggleEditTitle(false);
+    }
     
     useEffect(()=>{
         uid && getConversationByUid();
@@ -123,7 +132,11 @@ export default function Conversation({ uid, client, updateClient }) {
     }, [conversation, pending_message])
 
     useEffect(()=>{
-        if(!chat_functions.current) return;
+        setEditedTitle(title);
+    }, [title])
+
+    useEffect(()=>{
+        if(!chat_functions.current || !uid) return;
 
         const platform = chat_functions.current.platform
         if(platform) {
@@ -139,13 +152,24 @@ export default function Conversation({ uid, client, updateClient }) {
             })()
         }
     // eslint-disable-next-line
-    }, [client])
+    }, [uid])
 
     return (
         <div className="conversation-main">
             {
                 uid ? 
                 <>
+                <div className="title-bar">
+                    {
+                        edit_title ? 
+                        <form onSubmit={evt=>{evt.preventDefault(); submitUpdateTitle()}}>
+                            <input className="edit-title" value={edited_title} onChange={evt=>setEditedTitle(evt.target.value)} />
+                            <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>
                 <div className="bubbles" ref={bubblesRef}>
                     { conversation.map(({role, content}, idx) => {
                         return (
diff --git a/src/components/chat/index.jsx b/src/components/chat/index.jsx
index a6a3116..288007e 100644
--- a/src/components/chat/index.jsx
+++ b/src/components/chat/index.jsx
@@ -40,6 +40,20 @@ export default function Chat() {
         resetRequestDelete();
     }
 
+    async function updateTitle(title) {
+        await idb.updateOne("chat-history", {title}, [{uid: chat.uid}])
+
+        selectChat({
+            ...chat, title: title
+        })
+
+        let history_cp = [...history];
+        history_cp[
+            history_cp.findIndex(e=>e.uid === chat.uid)
+        ].title = title;
+        setHistory(history_cp);
+    }
+
     useEffect(()=>{
         if(dialogRef.current) {
             if(showConfirm) dialogRef.current.showModal();
@@ -58,7 +72,11 @@ export default function Chat() {
                 setHistory={setHistory} history={history} 
                 deleteHistory={requestDelete}
             />
-            <Conversation uid={chat.uid} client={chat.client} updateClient={updateChatClient} />
+            <Conversation 
+                uid={chat.uid} 
+                title={chat.title} updateTitle={updateTitle}
+                client={chat.client} updateClient={updateChatClient}
+            />
             <dialog ref={dialogRef}>
                 <div>
                     Delete <strong>{conv_to_delete && conv_to_delete.title}</strong>?
diff --git a/src/styles/chat.css b/src/styles/chat.css
index 428a338..7a056eb 100644
--- a/src/styles/chat.css
+++ b/src/styles/chat.css
@@ -111,9 +111,10 @@
     background-repeat: no-repeat;
     background-size: cover;
 
+    --title-bar-height: 40px;
     --send-input-height: 60px;
     --elem-size: 40px;
-    --bubbles-height: calc(100% - var(--send-input-height) - 10px);
+    --bubbles-height: calc(100% - var(--send-input-height) - var(--title-bar-height) - 10px);
 }
 
 .chat > .conversation-main::before {
@@ -142,6 +143,39 @@
     background-image: none;
 }
 
+.chat > .conversation-main > .title-bar {
+    background-color: var(--normal-bg-color);
+    width: 100%;
+    height: var(--title-bar-height);
+    padding: 0px 15px;
+    align-content: center;
+    font-size: 15px;
+    font-weight: bold;
+    color: rgb(50, 50, 50);
+
+    --elem-height: calc(var(--title-bar-height) - 14px);
+}
+
+.chat > .conversation-main > .title-bar > form {
+    display: flex;
+}
+
+.chat > .conversation-main > .title-bar .edit-title {
+    border: none;
+    background-color: transparent;
+    border-bottom: 1px solid gray;
+    padding: 0px 5px;
+    width: 100%;
+    font-size: 15px;
+    height: var(--elem-height);
+}
+
+.chat > .conversation-main > .title-bar .btn {
+    height: var(--elem-height);
+    width: var(--elem-height);
+    margin-left: 15px;
+}
+
 .chat > .conversation-main > .bubbles {
     height: var(--bubbles-height);
     width: 100%;
@@ -149,7 +183,7 @@
     margin-bottom: 10px;
     position: absolute;
     left: 0;
-    top: 0;
+    top: var(--title-bar-height);
     padding: 20px 10px;
 }