From 5c9d11861efb41c2a1f07f98ddfbd62c7579969b Mon Sep 17 00:00:00 2001 From: staticGuru Date: Sun, 8 Oct 2023 22:08:19 +0530 Subject: [PATCH 01/17] add the coversation tile in the chat section --- frontend/src/Navigation.tsx | 51 ++++++++++++------------------------- 1 file changed, 16 insertions(+), 35 deletions(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index e6c5bb6..4c5aac3 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -32,6 +32,7 @@ import { useMediaQuery, useOutsideAlerter } from './hooks'; import Upload from './upload/Upload'; import { Doc, getConversations } from './preferences/preferenceApi'; import SelectDocsModal from './preferences/SelectDocsModal'; +import ConversationTile from './conversation/ConversationTile'; interface NavigationProps { navOpen: boolean; @@ -126,6 +127,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { ); }); }; + + function updateConversationName(updatedConversation: object) { + console.log(updatedConversation); + } useOutsideAlerter( navRef, () => { @@ -210,41 +215,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
{conversations - ? conversations.map((conversation) => { - return ( -
{ - handleConversationClick(conversation.id); - }} - className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${ - conversationId === conversation.id ? 'bg-gray-100' : '' - }`} - > -
- -

- {conversation.name.length > 45 - ? conversation.name.substring(0, 45) + '...' - : conversation.name} -

-
- - {conversationId === conversation.id ? ( - Exit { - event.stopPropagation(); - handleDeleteConversation(conversation.id); - }} - /> - ) : null} -
- ); - }) + ? conversations.map((conversation, index) => ( + handleConversationClick(id)} + onDeleteConversation={(id) => handleDeleteConversation(id)} + onSave={(conversation) => + updateConversationName(conversation) + } + /> + )) : null}
From ceb9c70fbae464f537c45d612f0f10cd777ddf73 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Sun, 8 Oct 2023 22:08:42 +0530 Subject: [PATCH 02/17] add the edit icons in the assets --- frontend/src/assets/edit.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/assets/edit.svg diff --git a/frontend/src/assets/edit.svg b/frontend/src/assets/edit.svg new file mode 100644 index 0000000..2565377 --- /dev/null +++ b/frontend/src/assets/edit.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From f91ca796deadf8bc1fc35367f7bc5df5f5caa8d5 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Sun, 8 Oct 2023 22:09:16 +0530 Subject: [PATCH 03/17] add the check Mark icons --- frontend/src/assets/checkMark.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/assets/checkMark.svg diff --git a/frontend/src/assets/checkMark.svg b/frontend/src/assets/checkMark.svg new file mode 100644 index 0000000..9ed02cb --- /dev/null +++ b/frontend/src/assets/checkMark.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 10cf0470cb3453312b1800c11fd2a5d808d1a679 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Sun, 8 Oct 2023 22:09:38 +0530 Subject: [PATCH 04/17] add the conversation Tile --- .../src/conversation/ConversationTile.tsx | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 frontend/src/conversation/ConversationTile.tsx diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx new file mode 100644 index 0000000..e97d998 --- /dev/null +++ b/frontend/src/conversation/ConversationTile.tsx @@ -0,0 +1,84 @@ +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; +import Edit from '../assets/edit.svg'; +import Exit from '../assets/exit.svg'; +import Message from '../assets/message.svg'; + +import { selectConversationId } from '../preferences/preferenceSlice'; + +interface ConversationTileProps { + conversation: { name: string; id: string }; + selectConversation: (arg1: string) => void; + onDeleteConversation: (arg1: string) => void; + onSave: ({ name, id }: { name: string; id: string }) => void; +} + +export default function ConversationTile({ + conversation, + selectConversation, + onDeleteConversation, + onSave, +}: ConversationTileProps) { + const conversationId = useSelector(selectConversationId); + + const [isEdit, setIsEdit] = useState(false); + const [conversationName, setConversationsName] = useState(conversation.name); + + function handleEditConversation() { + setIsEdit(true); + } + return ( +
{ + selectConversation(conversation.id); + }} + className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${ + conversationId === conversation.id ? 'bg-gray-100' : '' + }`} + > +
+ + {isEdit ? ( + setConversationsName(e.target.value)} + /> + ) : ( +

+ {conversationName.length > 45 + ? conversationName.substring(0, 45) + '...' + : conversationName} +

+ )} +
+ {conversationId === conversation.id ? ( + <> + Edit { + event.stopPropagation(); + isEdit + ? onSave({ id: conversationId, name: conversationName }) + : handleEditConversation(); + }} + /> + Exit { + event.stopPropagation(); + onDeleteConversation(conversation.id); + }} + /> + + ) : null} +
+ ); +} From 6b617955b7433eade76f8b765687084ee9c31cb2 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Sun, 8 Oct 2023 22:31:17 +0530 Subject: [PATCH 05/17] add the check mark logics --- .../src/conversation/ConversationTile.tsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index e97d998..b7e0058 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import Edit from '../assets/edit.svg'; import Exit from '../assets/exit.svg'; import Message from '../assets/message.svg'; +import CheckMark from '../assets/checkMark.svg'; import { selectConversationId } from '../preferences/preferenceSlice'; @@ -20,12 +21,26 @@ export default function ConversationTile({ onSave, }: ConversationTileProps) { const conversationId = useSelector(selectConversationId); + const inputRef = useRef(null); const [isEdit, setIsEdit] = useState(false); const [conversationName, setConversationsName] = useState(conversation.name); function handleEditConversation() { setIsEdit(true); + // inputRef?.current?.focus(); + } + function handleSaveConversation(changedConversation: any) { + onSave(changedConversation); + setIsEdit(false); + } + function handleBlur() { + if (conversation.name !== conversationName) { + handleSaveConversation({ + id: conversationId, + name: conversationName, + }); + } } return (
{isEdit ? ( setConversationsName(e.target.value)} /> ) : ( @@ -56,14 +74,17 @@ export default function ConversationTile({ {conversationId === conversation.id ? ( <> Edit { event.stopPropagation(); isEdit - ? onSave({ id: conversationId, name: conversationName }) + ? handleSaveConversation({ + id: conversationId, + name: conversationName, + }) : handleEditConversation(); }} /> From a032164a99ca07d4b1f75fb48f4998671917d563 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 10:25:38 +0530 Subject: [PATCH 06/17] Add update conversation name API --- application/api/user/routes.py | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/application/api/user/routes.py b/application/api/user/routes.py index 02a0876..aa0d15b 100644 --- a/application/api/user/routes.py +++ b/application/api/user/routes.py @@ -53,6 +53,15 @@ def get_single_conversation(): conversation = conversations_collection.find_one({"_id": ObjectId(conversation_id)}) return jsonify(conversation['queries']) +@user.route("/api/update_conversation_name", methods=["POST"]) +def update_conversation_name(): + # update data for a conversation + data = request.get_json() + id = data["id"] + name = data["name"] + conversation = conversations_collection.update_one({"_id": ObjectId(id)},{"$set":{"name":name}}) + return {"status": "ok"} + @user.route("/api/feedback", methods=["POST"]) def api_feedback(): From b8539122ed0fb31bf0569fb6cc9d14174773f3e5 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 12:48:48 +0530 Subject: [PATCH 07/17] add the update conversation callbacks --- frontend/src/Navigation.tsx | 41 +++++++++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 4c5aac3..97034ea 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -69,16 +69,20 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { useEffect(() => { if (!conversations) { - getConversations() - .then((fetchedConversations) => { - dispatch(setConversations(fetchedConversations)); - }) - .catch((error) => { - console.error('Failed to fetch conversations: ', error); - }); + fetchConversations(); } }, [conversations, dispatch]); + async function fetchConversations() { + return await getConversations() + .then((fetchedConversations) => { + dispatch(setConversations(fetchedConversations)); + }) + .catch((error) => { + console.error('Failed to fetch conversations: ', error); + }); + } + const handleDeleteConversation = (id: string) => { fetch(`${apiHost}/api/delete_conversation?id=${id}`, { method: 'POST', @@ -128,8 +132,27 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { }); }; - function updateConversationName(updatedConversation: object) { - console.log(updatedConversation); + async function updateConversationName(updatedConversation: { + name: string; + id: string; + }) { + await fetch(`${apiHost}/api/update_conversation_name`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(updatedConversation), + }) + .then((response) => response.json()) + .then((data) => { + if (data) { + navigate('/'); + fetchConversations(); + } + }) + .catch((err) => { + console.error(err); + }); } useOutsideAlerter( navRef, From 022c0c3a890fb469936d74da5726d576b4f1ed3d Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 12:49:09 +0530 Subject: [PATCH 08/17] add trash icons changes --- frontend/src/assets/trash.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/assets/trash.svg diff --git a/frontend/src/assets/trash.svg b/frontend/src/assets/trash.svg new file mode 100644 index 0000000..d0e4546 --- /dev/null +++ b/frontend/src/assets/trash.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 17264e787242d93f7eddd4f87dcc463e15c7d82a Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 12:50:12 +0530 Subject: [PATCH 09/17] add the outside click listioner --- .../src/conversation/ConversationTile.tsx | 74 ++++++++++++------- 1 file changed, 46 insertions(+), 28 deletions(-) diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index b7e0058..b578e38 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -1,11 +1,13 @@ -import React, { useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import Edit from '../assets/edit.svg'; import Exit from '../assets/exit.svg'; import Message from '../assets/message.svg'; import CheckMark from '../assets/checkMark.svg'; +import Trash from '../assets/trash.svg'; import { selectConversationId } from '../preferences/preferenceSlice'; +import { useOutsideAlerter } from '../hooks'; interface ConversationTileProps { conversation: { name: string; id: string }; @@ -21,29 +23,47 @@ export default function ConversationTile({ onSave, }: ConversationTileProps) { const conversationId = useSelector(selectConversationId); - const inputRef = useRef(null); + const tileRef = useRef(null); const [isEdit, setIsEdit] = useState(false); - const [conversationName, setConversationsName] = useState(conversation.name); + const [conversationName, setConversationsName] = useState(''); + useOutsideAlerter( + tileRef, + () => + handleSaveConversation({ + id: conversationId || conversation.id, + name: conversationName, + }), + [conversationName], + ); + + useEffect(() => { + setConversationsName(conversation.name); + }, [conversation.name]); function handleEditConversation() { setIsEdit(true); - // inputRef?.current?.focus(); - } - function handleSaveConversation(changedConversation: any) { - onSave(changedConversation); - setIsEdit(false); } - function handleBlur() { - if (conversation.name !== conversationName) { - handleSaveConversation({ - id: conversationId, - name: conversationName, - }); + + function handleSaveConversation(changedConversation: { + name: string; + id: string; + }) { + if (changedConversation.name.trim().length) { + onSave(changedConversation); + setIsEdit(false); + } else { + onClear(); } } + + function onClear() { + setConversationsName(conversation.name); + setIsEdit(false); + } return (
{ selectConversation(conversation.id); }} @@ -51,32 +71,28 @@ export default function ConversationTile({ conversationId === conversation.id ? 'bg-gray-100' : '' }`} > -
+
{isEdit ? ( setConversationsName(e.target.value)} /> ) : ( -

- {conversationName.length > 45 - ? conversationName.substring(0, 45) + '...' - : conversationName} +

+ {conversationName}

)}
{conversationId === conversation.id ? ( - <> +
Edit { event.stopPropagation(); @@ -89,16 +105,18 @@ export default function ConversationTile({ }} /> Exit { event.stopPropagation(); - onDeleteConversation(conversation.id); + isEdit ? onClear() : onDeleteConversation(conversation.id); }} /> - +
) : null}
); From b49e8deb3ef427cff6b5a8da954c57b455665823 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 14:13:09 +0530 Subject: [PATCH 10/17] add the typescript props interface --- .../src/conversation/ConversationTile.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index b578e38..29a0d51 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import Edit from '../assets/edit.svg'; import Exit from '../assets/exit.svg'; @@ -9,11 +9,15 @@ import Trash from '../assets/trash.svg'; import { selectConversationId } from '../preferences/preferenceSlice'; import { useOutsideAlerter } from '../hooks'; +interface ConversationProps { + name: string; + id: string; +} interface ConversationTileProps { - conversation: { name: string; id: string }; + conversation: ConversationProps; selectConversation: (arg1: string) => void; onDeleteConversation: (arg1: string) => void; - onSave: ({ name, id }: { name: string; id: string }) => void; + onSave: ({ name, id }: ConversationProps) => void; } export default function ConversationTile({ @@ -45,10 +49,7 @@ export default function ConversationTile({ setIsEdit(true); } - function handleSaveConversation(changedConversation: { - name: string; - id: string; - }) { + function handleSaveConversation(changedConversation: ConversationProps) { if (changedConversation.name.trim().length) { onSave(changedConversation); setIsEdit(false); @@ -71,7 +72,11 @@ export default function ConversationTile({ conversationId === conversation.id ? 'bg-gray-100' : '' }`} > -
+
{isEdit ? ( Date: Mon, 9 Oct 2023 14:44:43 +0530 Subject: [PATCH 11/17] Change the width in the tile --- frontend/src/conversation/ConversationTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index 29a0d51..b5cb755 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -74,7 +74,7 @@ export default function ConversationTile({ >
From 95fe1037180fbb1f958a1b81ca27fed26bbf626f Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 15:17:32 +0530 Subject: [PATCH 12/17] add the conversation in the result response --- application/api/user/routes.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application/api/user/routes.py b/application/api/user/routes.py index aa0d15b..9853f9a 100644 --- a/application/api/user/routes.py +++ b/application/api/user/routes.py @@ -60,7 +60,7 @@ def update_conversation_name(): id = data["id"] name = data["name"] conversation = conversations_collection.update_one({"_id": ObjectId(id)},{"$set":{"name":name}}) - return {"status": "ok"} + return {"status": "ok","result":conversation} @user.route("/api/feedback", methods=["POST"]) From a06369dd7b89ac111ca103f3f13d81ba62cca3f8 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 15:19:29 +0530 Subject: [PATCH 13/17] add the checkmark icons --- frontend/src/assets/checkmark.svg | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/assets/checkmark.svg b/frontend/src/assets/checkmark.svg index 682c29d..9ed02cb 100644 --- a/frontend/src/assets/checkmark.svg +++ b/frontend/src/assets/checkmark.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file From 3753f7d138e104c3ac043842c19482f335cea270 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 16:12:56 +0530 Subject: [PATCH 14/17] change the input outline border color --- frontend/src/conversation/ConversationTile.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index b5cb755..592c52b 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import Edit from '../assets/edit.svg'; import Exit from '../assets/exit.svg'; import Message from '../assets/message.svg'; -import CheckMark from '../assets/checkMark.svg'; +import CheckMark from '../assets/checkmark.svg'; import Trash from '../assets/trash.svg'; import { selectConversationId } from '../preferences/preferenceSlice'; @@ -82,7 +82,7 @@ export default function ConversationTile({ setConversationsName(e.target.value)} /> From 72481e845344f1c01e807ac73c939c475e95e5bc Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 16:16:20 +0530 Subject: [PATCH 15/17] Fix the post API issues --- application/api/user/routes.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/application/api/user/routes.py b/application/api/user/routes.py index 9853f9a..fdff2e9 100644 --- a/application/api/user/routes.py +++ b/application/api/user/routes.py @@ -59,8 +59,8 @@ def update_conversation_name(): data = request.get_json() id = data["id"] name = data["name"] - conversation = conversations_collection.update_one({"_id": ObjectId(id)},{"$set":{"name":name}}) - return {"status": "ok","result":conversation} + conversations_collection.update_one({"_id": ObjectId(id)},{"$set":{"name":name}}) + return {"status": "ok"} @user.route("/api/feedback", methods=["POST"]) From c79ec45adb9ab3fedac84c005d1f4a8913f38297 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 16:16:56 +0530 Subject: [PATCH 16/17] Fix the lint issues --- frontend/src/About.tsx | 2 +- frontend/src/App.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index ca318a6..fe26835 100644 --- a/frontend/src/About.tsx +++ b/frontend/src/About.tsx @@ -4,7 +4,7 @@ export default function About() { return (
-
+

About DocsGPT

🦖

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ad9d72a..4454094 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -18,9 +18,7 @@ export default function App() {
From a998db057028aaa14e8688f32be60b83f64eee04 Mon Sep 17 00:00:00 2001 From: staticGuru Date: Mon, 9 Oct 2023 16:30:09 +0530 Subject: [PATCH 17/17] add fetch conversations in the delete callbacks --- frontend/src/Navigation.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index bf43cbd..7a55cd0 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -94,6 +94,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { ) as HTMLElement; const parentElement = imageElement.parentNode as HTMLElement; parentElement.parentNode?.removeChild(parentElement); + fetchConversations(); }) .catch((error) => console.error(error)); };