LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(shared): UI

Browse Source
This commit is contained in:
ManishMadan2882
2024-07-30 01:13:47 +05:30
parent a58369fbb1
commit ad30a8476c
8 changed files with 138 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/conversation/Conversation.tsx
View File

@@ -206,7 +206,7 @@ export default function Conversation() {
onClick={() => {
setShareModalState(true);
}}
className="fixed top-4 right-20 z-30 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
className="fixed top-4 right-20 z-0 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
>
<img
className="m-2 h-5 w-5 filter dark:invert"

257
frontend/src/conversation/ConversationTile.tsx
View File

@@ -79,138 +79,139 @@ export default function ConversationTile({
setIsEdit(false);
}
return (
<div
ref={tileRef}
onMouseEnter={() => {
setOpen(false);
setIsHovered(true);
}}
onMouseLeave={() => {
setIsHovered(false);
}}
onClick={() => {
conversationId !== conversation.id &&
selectConversation(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
conversationId === conversation.id || isOpen
? 'bg-gray-100 dark:bg-[#28292E]'
: ''
}`}
>
<div className={`flex w-10/12 gap-4`}>
<img
src={isDarkTheme ? MessageDark : Message}
className="ml-4 w-5 dark:text-white"
/>
{isEdit ? (
<input
autoFocus
type="text"
className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
value={conversationName}
onChange={(e) => setConversationsName(e.target.value)}
<>
<div
ref={tileRef}
onMouseEnter={() => {
setIsHovered(true);
}}
onMouseLeave={() => {
setIsHovered(false);
}}
onClick={() => {
conversationId !== conversation.id &&
selectConversation(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
conversationId === conversation.id || isOpen || isHovered
? 'bg-gray-100 dark:bg-[#28292E]'
: ''
}`}
>
<div className={`flex w-10/12 gap-4`}>
<img
src={isDarkTheme ? MessageDark : Message}
className="ml-4 w-5 dark:text-white"
/>
) : (
<p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
{conversationName}
</p>
)}
</div>
{(conversationId === conversation.id || isHovered || isOpen) && (
<div className="flex text-white dark:text-[#949494]" ref={menuRef}>
{isEdit ? (
<div className="flex gap-1">
<img
src={CheckMark2}
alt="Edit"
className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
id={`img-${conversation.id}`}
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
handleSaveConversation({
id: conversation.id,
name: conversationName,
});
}}
/>
<img
src={Exit}
alt="Exit"
className={`mr-4 mt-px h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
id={`img-${conversation.id}`}
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
onClear();
}}
/>
</div>
<input
autoFocus
type="text"
className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
value={conversationName}
onChange={(e) => setConversationsName(e.target.value)}
/>
) : (
<button
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
setOpen(true);
}}
className="mr-2 flex w-4 justify-center"
>
<img src={threeDots} width={8} />
</button>
)}
{isOpen && (
<div className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36">
<button
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
setShareModalState(true);
setOpen(false);
}}
className="flex-start flex items-center gap-4 rounded-t-xl p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
>
<img
src={Share}
alt="Share"
width={14}
height={14}
className="cursor-pointer hover:opacity-50"
id={`img-${conversation.id}`}
/>
<span>{t('convTile.share')}</span>
</button>
<button
onClick={handleEditConversation}
className="flex-start flex items-center gap-4 p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
>
<img
src={Edit}
alt="Edit"
width={16}
height={16}
className="cursor-pointer hover:opacity-50"
id={`img-${conversation.id}`}
/>
<span>{t('convTile.rename')}</span>
</button>
<button
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
setDeleteModalState('ACTIVE');
setOpen(false);
}}
className="flex-start flex items-center gap-3 rounded-b-xl p-2 text-red-700 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
>
<img
src={Trash}
alt="Edit"
width={24}
height={24}
className="cursor-pointer hover:opacity-50"
/>
<span>{t('convTile.delete')}</span>
</button>
</div>
<p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
{conversationName}
</p>
)}
</div>
)}
{(conversationId === conversation.id || isHovered || isOpen) && (
<div className="flex text-white dark:text-[#949494]" ref={menuRef}>
{isEdit ? (
<div className="flex gap-1">
<img
src={CheckMark2}
alt="Edit"
className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
id={`img-${conversation.id}`}
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
handleSaveConversation({
id: conversation.id,
name: conversationName,
});
}}
/>
<img
src={Exit}
alt="Exit"
className={`mr-4 mt-px h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
id={`img-${conversation.id}`}
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
onClear();
}}
/>
</div>
) : (
<button
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
setOpen(true);
}}
className="mr-2 flex w-4 justify-center"
>
<img src={threeDots} width={8} />
</button>
)}
{isOpen && (
<div className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36">
<button
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
setShareModalState(true);
setOpen(false);
}}
className="flex-start flex items-center gap-4 rounded-t-xl p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
>
<img
src={Share}
alt="Share"
width={14}
height={14}
className="cursor-pointer hover:opacity-50"
id={`img-${conversation.id}`}
/>
<span>{t('convTile.share')}</span>
</button>
<button
onClick={handleEditConversation}
className="flex-start flex items-center gap-4 p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
>
<img
src={Edit}
alt="Edit"
width={16}
height={16}
className="cursor-pointer hover:opacity-50"
id={`img-${conversation.id}`}
/>
<span>{t('convTile.rename')}</span>
</button>
<button
onClick={(event: SyntheticEvent) => {
event.stopPropagation();
setDeleteModalState('ACTIVE');
setOpen(false);
}}
className="flex-start flex items-center gap-3 rounded-b-xl p-2 text-red-700 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
>
<img
src={Trash}
alt="Edit"
width={24}
height={24}
className="cursor-pointer hover:opacity-50"
/>
<span>{t('convTile.delete')}</span>
</button>
</div>
)}
</div>
)}
</div>
<ConfirmationModal
message={t('convTile.deleteWarning')}
modalState={deleteModalState}
@@ -227,6 +228,6 @@ export default function ConversationTile({
conversationId={conversation.id}
/>
)}
</div>
</>
);
}

2
frontend/src/locale/en.json
View File

@@ -108,7 +108,7 @@
"label": "Create a public page to share",
"note": "Source document, personal information and further conversation will remain private",
"create": "Create",
"option":"Allow users to prompt further"
"option": "Allow users to prompt further"
}
},
"sharedConv": {

2
frontend/src/locale/es.json
View File

@@ -108,7 +108,7 @@
"label": "Crear una página pública para compartir",
"note": "El documento original, la información personal y las conversaciones posteriores permanecerán privadas",
"create": "Crear",
"option":"Permitir a los usuarios realizar más consultas."
"option": "Permitir a los usuarios realizar más consultas."
}
},
"sharedConv": {

2
frontend/src/locale/jp.json
View File

@@ -108,7 +108,7 @@
"label": "共有ページを作成して共有する",
"note": "ソースドキュメント、個人情報、および以降の会話は非公開のままになります",
"create": "作成",
"option":"ユーザーがより多くのクエリを実行できるようにします。"
"option": "ユーザーがより多くのクエリを実行できるようにします。"
}
},
"sharedConv": {

2
frontend/src/locale/zh.json
View File

@@ -108,7 +108,7 @@
"label": "创建用于分享的公共页面",
"note": "源文档、个人信息和后续对话将保持私密",
"create": "创建",
"option":"允许用户进行更多查询。"
"option": "允许用户进行更多查询。"
}
},
"sharedConv": {

2
frontend/src/modals/ConfirmationModal.tsx
View File

@@ -1,4 +1,3 @@
import { SyntheticEvent } from 'react';
import Exit from '../assets/exit.svg';
import { ActiveState } from '../models/misc';
import { useTranslation } from 'react-i18next';
@@ -22,7 +21,6 @@ function ConfirmationModal({
const { t } = useTranslation();
return (
<article
onClick={(event: SyntheticEvent) => event.stopPropagation()}
className={`${
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha`}

11
frontend/src/modals/ShareConversationModal.tsx
View File

@@ -1,4 +1,4 @@
import { SyntheticEvent, useState } from 'react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import {
@@ -117,10 +117,7 @@ export const ShareConversationModal = ({
};
return (
<div
onClick={(event: SyntheticEvent) => event.stopPropagation()}
className="z-100 fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50 text-chinese-black dark:text-silver"
>
<div className="fixed top-0 left-0 z-40 flex h-screen w-screen cursor-default items-center justify-center bg-gray-alpha bg-opacity-50 text-chinese-black dark:text-silver">
<div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
<button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
<img className="filter dark:invert" src={Exit} />
@@ -173,7 +170,7 @@ export const ShareConversationModal = ({
</span>
{status === 'fetched' ? (
<button
className="my-1 h-10 w-28 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
className="my-1 h-10 w-28 rounded-full border border-solid bg-purple-30 p-2 text-sm text-white hover:bg-[#6F3FD1]"
onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
>
{isCopied
@@ -182,7 +179,7 @@ export const ShareConversationModal = ({
</button>
) : (
<button
className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full border border-solid border-purple-30 p-2 text-center text-sm font-normal text-purple-30 hover:bg-purple-30 hover:text-white"
className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full border border-solid bg-purple-30 p-2 text-center text-sm font-normal text-white hover:bg-[#6F3FD1]"
onClick={() => {
shareCoversationPublicly(allowPrompt);
}}