Skip to content

Commit f8fbf99

Browse files
NicholasGohNicholasGoh
authored
Merge pull request #1 from NicholasGoh/agentic-rag-ui
Agentic rag UI
2 parents eb7d02c + 4c9b271 commit f8fbf99

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2146
-1093
lines changed

‎.dockerignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
.env
2-
.env.local
32
node_modules
43
test-results

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.next
2+
node_modules

‎.husky/pre-commit

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
npm run prettier && npm run eslint && git add .

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.next
2+
node_modules

‎Dockerfile

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎__tests__/utils/app/importExports.test.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ describe('cleanData Functions', () => {
105105
},
106106
],
107107
folders: [],
108-
prompts:[]
108+
prompts: [],
109109
});
110110
});
111111
});
@@ -212,7 +212,7 @@ describe('cleanData Functions', () => {
212212
},
213213
],
214214
} as ExportFormatV4;
215-
215+
216216
const obj = cleanData(data);
217217
expect(isLatestExportFormat(obj)).toBe(true);
218218
expect(obj).toEqual({
@@ -253,9 +253,7 @@ describe('cleanData Functions', () => {
253253
folderId: null,
254254
},
255255
],
256-
257256
});
258257
});
259258
});
260-
261259
});

‎components/Chat/Chat.tsx

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Conversation, Message } from '@/types/chat';
1+
import { APIDocument, Conversation, Message } from '@/types/chat';
22
import { KeyValuePair } from '@/types/data';
33
import { ErrorMessage } from '@/types/error';
44
import { OpenAIModel, OpenAIModelID } from '@/types/openai';
@@ -207,14 +207,7 @@ export const Chat: FC<Props> = memo(
207207
<>
208208
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
209209
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
210-
{/* {models.length === 0 ? (
211-
<div>
212-
<Spinner size="16px" className="mx-auto" />
213-
</div>
214-
) : (
215-
'Chatbot UI'
216-
)} */
217-
'Chatbot UI'}
210+
{'Chatbot UI'}
218211
</div>
219212

220213
{models.length > 0 && (
@@ -249,18 +242,6 @@ export const Chat: FC<Props> = memo(
249242
<>
250243
<div className="flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
251244
{t('Model')}: {conversation.model.name}
252-
<button
253-
className="ml-2 cursor-pointer hover:opacity-50"
254-
onClick={handleSettings}
255-
>
256-
<IconSettings size={18} />
257-
</button>
258-
<button
259-
className="ml-2 cursor-pointer hover:opacity-50"
260-
onClick={onClearAll}
261-
>
262-
<IconClearAll size={18} />
263-
</button>
264245
</div>
265246
{showSettings && (
266247
<div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
@@ -286,6 +267,11 @@ export const Chat: FC<Props> = memo(
286267
message={message}
287268
messageIndex={index}
288269
onEditMessage={onEditMessage}
270+
documents={
271+
conversation.documents
272+
? conversation.documents[index]
273+
: []
274+
}
289275
/>
290276
))}
291277

‎components/Chat/ChatInput.tsx

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const ChatInput: FC<Props> = ({
6464

6565
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
6666
const value = e.target.value;
67-
const maxLength = model.maxLength;
67+
const maxLength = 4096; // model.maxLength;
6868

6969
if (value.length > maxLength) {
7070
alert(
@@ -230,7 +230,7 @@ export const ChatInput: FC<Props> = ({
230230
textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
231231
}`;
232232
}
233-
}, [content]);
233+
}, [content, textareaRef]);
234234

235235
useEffect(() => {
236236
const handleOutsideClick = (e: MouseEvent) => {
@@ -271,33 +271,9 @@ export const ChatInput: FC<Props> = ({
271271
)}
272272

273273
<div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
274-
<button
275-
className="absolute left-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
276-
onClick={() => setShowPluginSelect(!showPluginSelect)}
277-
onKeyDown={(e) => {}}
278-
>
279-
{plugin ? <IconBrandGoogle size={20} /> : <IconBolt size={20} />}
280-
</button>
281-
282-
{showPluginSelect && (
283-
<div className="absolute left-0 bottom-14 bg-white dark:bg-[#343541]">
284-
<PluginSelect
285-
plugin={plugin}
286-
onPluginChange={(plugin: Plugin) => {
287-
setPlugin(plugin);
288-
setShowPluginSelect(false);
289-
290-
if (textareaRef && textareaRef.current) {
291-
textareaRef.current.focus();
292-
}
293-
}}
294-
/>
295-
</div>
296-
)}
297-
298274
<textarea
299275
ref={textareaRef}
300-
className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-10 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-10"
276+
className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-4 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-4"
301277
style={{
302278
resize: 'none',
303279
bottom: `${textareaRef?.current?.scrollHeight}px`,

‎components/Chat/ChatMessage.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
import { Message } from '@/types/chat';
2-
import { IconCheck, IconCopy, IconEdit, IconUser, IconRobot } from '@tabler/icons-react';
1+
import { APIDocument, Message } from '@/types/chat';
2+
import {
3+
IconCheck,
4+
IconCopy,
5+
IconEdit,
6+
IconUser,
7+
IconRobot,
8+
} from '@tabler/icons-react';
9+
import { CustomizedDialogs } from '@/components/Dialog/Dialog';
310
import { useTranslation } from 'next-i18next';
411
import { FC, memo, useEffect, useRef, useState } from 'react';
512
import rehypeMathjax from 'rehype-mathjax';
@@ -12,10 +19,11 @@ interface Props {
1219
message: Message;
1320
messageIndex: number;
1421
onEditMessage: (message: Message, messageIndex: number) => void;
22+
documents: APIDocument[];
1523
}
1624

1725
export const ChatMessage: FC<Props> = memo(
18-
({ message, messageIndex, onEditMessage }) => {
26+
({ message, messageIndex, onEditMessage, documents }) => {
1927
const { t } = useTranslation('chat');
2028
const [isEditing, setIsEditing] = useState<boolean>(false);
2129
const [isTyping, setIsTyping] = useState<boolean>(false);
@@ -81,7 +89,11 @@ export const ChatMessage: FC<Props> = memo(
8189
>
8290
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
8391
<div className="min-w-[40px] text-right font-bold">
84-
{message.role === 'assistant' ? <IconRobot size={30}/> : <IconUser size={30}/>}
92+
{message.role === 'assistant' ? (
93+
<IconRobot size={30} />
94+
) : (
95+
<IconUser size={30} />
96+
)}
8597
</div>
8698

8799
<div className="prose mt-[-2px] w-full dark:prose-invert">
@@ -216,6 +228,7 @@ export const ChatMessage: FC<Props> = memo(
216228
>
217229
{message.content}
218230
</MemoizedReactMarkdown>
231+
<CustomizedDialogs documents={documents} />
219232
</>
220233
)}
221234
</div>

‎components/Chat/ModelSelect.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,13 @@ export const ModelSelect: FC<Props> = ({
4949
))}
5050
</select>
5151
</div>
52-
<div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
53-
<a href="https://platform.openai.com/account/usage" target="_blank" className="flex items-center">
54-
<IconExternalLink size={18} className={"inline mr-1"} />
52+
<div className="mt-3 flex w-full items-center text-left text-neutral-700 dark:text-neutral-400">
53+
<a
54+
href="https://platform.openai.com/account/usage"
55+
target="_blank"
56+
className="flex items-center"
57+
>
58+
<IconExternalLink size={18} className={'mr-1 inline'} />
5559
{t('View Account Usage')}
5660
</a>
5761
</div>

‎components/Chat/Regenerate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const Regenerate: FC<Props> = ({ onRegenerate }) => {
1414
{t('Sorry, there was an error.')}
1515
</div>
1616
<button
17-
className="flex h-12 gap-2 w-full items-center justify-center rounded-lg border border-b-neutral-300 bg-neutral-100 text-sm font-semibold text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200"
17+
className="flex h-12 w-full items-center justify-center gap-2 rounded-lg border border-b-neutral-300 bg-neutral-100 text-sm font-semibold text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200"
1818
onClick={onRegenerate}
1919
>
2020
<IconRefresh />

‎components/Chatbar/Chatbar.tsx

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -120,25 +120,7 @@ export const Chatbar: FC<Props> = ({
120120
<div
121121
className={`fixed top-0 bottom-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 transition-all sm:relative sm:top-0`}
122122
>
123-
<div className="flex items-center">
124-
<button
125-
className="flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-[14px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
126-
onClick={() => {
127-
onNewConversation();
128-
setSearchTerm('');
129-
}}
130-
>
131-
<IconPlus size={18} />
132-
{t('New chat')}
133-
</button>
134-
135-
<button
136-
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[14px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
137-
onClick={() => onCreateFolder(t('New folder'))}
138-
>
139-
<IconFolderPlus size={18} />
140-
</button>
141-
</div>
123+
<div className="flex items-center"></div>
142124

143125
{conversations.length > 1 && (
144126
<Search
@@ -167,32 +149,6 @@ export const Chatbar: FC<Props> = ({
167149
/>
168150
</div>
169151
)}
170-
171-
{conversations.length > 0 ? (
172-
<div
173-
className="pt-2"
174-
onDrop={(e) => handleDrop(e)}
175-
onDragOver={allowDrop}
176-
onDragEnter={highlightDrop}
177-
onDragLeave={removeHighlight}
178-
>
179-
<Conversations
180-
loading={loading}
181-
conversations={filteredConversations.filter(
182-
(conversation) => !conversation.folderId,
183-
)}
184-
selectedConversation={selectedConversation}
185-
onSelectConversation={onSelectConversation}
186-
onDeleteConversation={handleDeleteConversation}
187-
onUpdateConversation={handleUpdateConversation}
188-
/>
189-
</div>
190-
) : (
191-
<div className="mt-8 flex flex-col items-center gap-3 text-sm leading-normal text-white opacity-50">
192-
<IconMessagesOff />
193-
{t('No conversations.')}
194-
</div>
195-
)}
196152
</div>
197153

198154
<ChatbarSettings

‎components/Chatbar/ChatbarSettings.tsx

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,16 @@ interface Props {
2525

2626
export const ChatbarSettings: FC<Props> = ({
2727
lightMode,
28-
apiKey,
29-
pluginKeys,
3028
conversationsCount,
3129
onToggleLightMode,
32-
onApiKeyChange,
3330
onClearConversations,
3431
onExportConversations,
35-
onImportConversations,
36-
onPluginKeyChange,
37-
onClearPluginKey,
3832
}) => {
3933
const { t } = useTranslation('sidebar');
4034

4135
return (
4236
<div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
43-
{conversationsCount > 0 ? (
44-
<ClearConversations onClearConversations={onClearConversations} />
45-
) : null}
46-
47-
<Import onImport={onImportConversations} />
37+
{<ClearConversations onClearConversations={onClearConversations} />}
4838

4939
<SidebarButton
5040
text={t('Export data')}
@@ -61,14 +51,6 @@ export const ChatbarSettings: FC<Props> = ({
6151
onToggleLightMode(lightMode === 'light' ? 'dark' : 'light')
6252
}
6353
/>
64-
65-
<Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
66-
67-
<PluginKeys
68-
pluginKeys={pluginKeys}
69-
onPluginKeyChange={onPluginKeyChange}
70-
onClearPluginKey={onClearPluginKey}
71-
/>
7254
</div>
7355
);
7456
};

‎components/Chatbar/ClearConversations.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
2727

2828
<div className="flex w-[40px]">
2929
<IconCheck
30-
className="ml-auto min-w-[20px] mr-1 text-neutral-400 hover:text-neutral-100"
30+
className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-neutral-100"
3131
size={18}
3232
onClick={(e) => {
3333
e.stopPropagation();
@@ -47,7 +47,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
4747
</div>
4848
) : (
4949
<SidebarButton
50-
text={t('Clear conversations')}
50+
text={t('Delete chat')}
5151
icon={<IconTrash size={18} />}
5252
onClick={() => setIsConfirming(true)}
5353
/>

‎components/Chatbar/Conversation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const ConversationComponent: FC<Props> = ({
6868
return (
6969
<div className="relative flex items-center">
7070
{isRenaming && selectedConversation.id === conversation.id ? (
71-
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
71+
<div className="flex w-full items-center gap-3 rounded-lg bg-[#343541]/90 p-3">
7272
<IconMessage size={18} />
7373
<input
7474
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"

0 commit comments

Comments
 (0)