Skip to content

Commit af48782

Browse files
dartpaindartpain
authored
Merge pull request #1708 from ManishMadan2882/main
Refactor(fe): Conversation
2 parents f8c9214 + 726d4dd commit af48782

File tree

11 files changed

+441
-412
lines changed

11 files changed

+441
-412
lines changed

‎frontend/src/Hero.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Fragment } from 'react';
21
import DocsGPT3 from './assets/cute_docsgpt3.svg';
32
import { useTranslation } from 'react-i18next';
3+
44
export default function Hero({
55
handleQuestion,
66
}: {
@@ -17,40 +17,41 @@ export default function Hero({
1717
header: string;
1818
query: string;
1919
}>;
20+
2021
return (
21-
<div
22-
className={`pt-20 sm:pt-0 pb-6 sm:pb-12 flex h-full w-full flex-col text-black-1000 dark:text-bright-gray sm:w-full px-2 sm:px-0`}
23-
>
24-
<div className="flex h-full w-full flex-col items-center justify-center">
25-
<div className="flex items-center">
26-
<span className="p-0 text-4xl font-semibold">DocsGPT</span>
27-
<img className="mb-1 inline w-14 p-0" src={DocsGPT3} alt="docsgpt" />
22+
<div className="flex h-full w-full flex-col text-black-1000 dark:text-bright-gray items-center justify-between">
23+
{/* Header Section */}
24+
<div className="flex flex-col items-center justify-center flex-grow pt-8 md:pt-0">
25+
<div className="flex items-center mb-4">
26+
<span className="text-4xl font-semibold">DocsGPT</span>
27+
<img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
2828
</div>
29-
30-
<div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
3129
</div>
32-
<div className="mb-16 grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:mb-0 md:text-sm lg:grid-cols-2">
33-
{demos?.map(
34-
(demo: { header: string; query: string }, key: number) =>
35-
demo.header &&
36-
demo.query && (
37-
<Fragment key={key}>
30+
31+
{/* Demo Buttons Section */}
32+
<div className="w-full max-w-full mb-8 md:mb-16">
33+
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-3 md:gap-4 text-xs">
34+
{demos?.map(
35+
(demo: { header: string; query: string }, key: number) =>
36+
demo.header &&
37+
demo.query && (
3838
<button
39+
key={key}
3940
onClick={() => handleQuestion({ question: demo.query })}
40-
className={`w-full rounded-full border bg-transparent px-6 py-4 text-left min-w-11/12 sm:min-w-[362px] focus:outline-none
41+
className="w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors
4142
border-dark-gray text-just-black hover:bg-cultured
42-
dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green`}
43+
dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green"
4344
>
44-
<p className="mb-1 font-semibold text-black-1000 dark:text-bright-gray">
45+
<p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
4546
{demo.header}
4647
</p>
47-
<span className="text-gray-700 dark:text-gray-300 opacity-60">
48+
<span className="text-gray-700 dark:text-gray-300 opacity-60 line-clamp-2">
4849
{demo.query}
4950
</span>
5051
</button>
51-
</Fragment>
52-
),
53-
)}
52+
),
53+
)}
54+
</div>
5455
</div>
5556
</div>
5657
);

‎frontend/src/components/Input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Input = ({
3535
<div className={`relative ${className}`}>
3636
<input
3737
ref={inputRef}
38-
className={`h-[42px] w-full rounded-full px-3 py-1
38+
className={`peer h-[42px] w-full rounded-full px-3 py-1
3939
bg-transparent outline-none
4040
text-jet dark:text-bright-gray
4141
placeholder-transparent

‎frontend/src/components/MessageInput.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { useEffect, useRef } from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import { useDarkTheme } from '../hooks';
4+
import Send from '../assets/send.svg';
5+
import SendDark from '../assets/send_dark.svg';
6+
import SpinnerDark from '../assets/spinner-dark.svg';
7+
import Spinner from '../assets/spinner.svg';
8+
9+
interface MessageInputProps {
10+
value: string;
11+
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
12+
onSubmit: () => void;
13+
loading: boolean;
14+
}
15+
16+
export default function MessageInput({
17+
value,
18+
onChange,
19+
onSubmit,
20+
loading,
21+
}: MessageInputProps) {
22+
const { t } = useTranslation();
23+
const [isDarkTheme] = useDarkTheme();
24+
const inputRef = useRef<HTMLTextAreaElement>(null);
25+
26+
const handleInput = () => {
27+
if (inputRef.current) {
28+
if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
29+
else inputRef.current.style.height = '64px';
30+
inputRef.current.style.height = `${Math.min(
31+
inputRef.current.scrollHeight,
32+
96,
33+
)}px`;
34+
}
35+
};
36+
37+
// Focus the textarea and set initial height on mount.
38+
useEffect(() => {
39+
inputRef.current?.focus();
40+
handleInput();
41+
}, []);
42+
43+
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
44+
if (e.key === 'Enter' && !e.shiftKey) {
45+
e.preventDefault();
46+
onSubmit();
47+
if (inputRef.current) {
48+
inputRef.current.value = '';
49+
handleInput();
50+
}
51+
}
52+
};
53+
54+
return (
55+
<div className="flex w-full mx-2 items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3">
56+
<label htmlFor="message-input" className="sr-only">
57+
{t('inputPlaceholder')}
58+
</label>
59+
<textarea
60+
id="message-input"
61+
ref={inputRef}
62+
value={value}
63+
onChange={onChange}
64+
tabIndex={1}
65+
placeholder={t('inputPlaceholder')}
66+
className="inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-lotion dark:bg-charleston-green-3 py-5 text-base leading-tight opacity-100 focus:outline-none dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 px-6"
67+
onInput={handleInput}
68+
onKeyDown={handleKeyDown}
69+
aria-label={t('inputPlaceholder')}
70+
/>
71+
{loading ? (
72+
<img
73+
src={isDarkTheme ? SpinnerDark : Spinner}
74+
className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
75+
alt={t('loading')}
76+
/>
77+
) : (
78+
<div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
79+
<button
80+
onClick={onSubmit}
81+
aria-label={t('send')}
82+
className="flex items-center justify-center"
83+
>
84+
<img
85+
className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
86+
src={isDarkTheme ? SendDark : Send}
87+
alt={t('send')}
88+
/>
89+
</button>
90+
</div>
91+
)}
92+
</div>
93+
);
94+
}

‎frontend/src/components/SourceDropdown.tsx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import Trash from '../assets/trash.svg';
33
import Arrow2 from '../assets/dropdown-arrow.svg';
4-
import { Doc } from '../models/misc';
4+
import { Doc, ActiveState } from '../models/misc';
55
import { useDispatch } from 'react-redux';
66
import { useTranslation } from 'react-i18next';
7+
import ConfirmationModal from '../modals/ConfirmationModal';
8+
79
type Props = {
810
options: Doc[] | null;
911
selectedDocs: Doc | null;
@@ -30,6 +32,10 @@ function SourceDropdown({
3032
import.meta.env.VITE_EMBEDDINGS_NAME ||
3133
'huggingface_sentence-transformers/all-mpnet-base-v2';
3234

35+
const [deleteModalState, setDeleteModalState] =
36+
useState<ActiveState>('INACTIVE');
37+
const [documentToDelete, setDocumentToDelete] = useState<Doc | null>(null);
38+
3339
const handleEmptyDocumentSelect = () => {
3440
dispatch(setSelectedDocs(null));
3541
setIsDocsListOpen(false);
@@ -50,6 +56,25 @@ function SourceDropdown({
5056
document.removeEventListener('mousedown', handleClickOutside);
5157
};
5258
}, []);
59+
60+
const confirmDelete = (option: Doc) => {
61+
setDocumentToDelete(option);
62+
setDeleteModalState('ACTIVE');
63+
};
64+
65+
const handleConfirmedDelete = () => {
66+
if (documentToDelete) {
67+
handleDeleteClick(documentToDelete);
68+
setDeleteModalState('INACTIVE');
69+
setDocumentToDelete(null);
70+
}
71+
};
72+
73+
const handleCancelDelete = () => {
74+
setDeleteModalState('INACTIVE');
75+
setDocumentToDelete(null);
76+
};
77+
5378
return (
5479
<div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
5580
<button
@@ -76,7 +101,7 @@ function SourceDropdown({
76101
/>
77102
</button>
78103
{isDocsListOpen && (
79-
<div className="absolute left-0 right-0 z-50 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
104+
<div className="absolute left-0 right-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
80105
{options ? (
81106
options.map((option: any, index: number) => {
82107
if (option.model === embeddingsName) {
@@ -106,7 +131,7 @@ function SourceDropdown({
106131
id={`img-${index}`}
107132
onClick={(event) => {
108133
event.stopPropagation();
109-
handleDeleteClick(option);
134+
confirmDelete(option);
110135
}}
111136
/>
112137
)}
@@ -132,6 +157,17 @@ function SourceDropdown({
132157
</div>
133158
</div>
134159
)}
160+
<ConfirmationModal
161+
message={t('settings.documents.deleteWarning', {
162+
name: documentToDelete?.name,
163+
})}
164+
modalState={deleteModalState}
165+
setModalState={setDeleteModalState}
166+
handleSubmit={handleConfirmedDelete}
167+
handleCancel={handleCancelDelete}
168+
submitLabel={t('convTile.delete')}
169+
variant="danger"
170+
/>
135171
</div>
136172
);
137173
}

0 commit comments

Comments
 (0)