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

hooks up the redux conversation state with conversation UI

Browse Source
This commit is contained in:
ajaythapliyal
2023-02-19 11:55:38 +05:30
parent 5b456cda16
commit e40eb53b7a
3 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import Hero from '../Hero';
import ConversationBubble from './ConversationBubble';
@@ -6,13 +7,18 @@ import { selectConversation } from './conversationSlice';
export default function Conversation() {
const messages = useSelector(selectConversation);
const endMessageRef = useRef<HTMLDivElement>(null);
useEffect(() => endMessageRef?.current?.scrollIntoView());
return (
<div className="flex justify-center p-6">
<div className="w-10/12 transition-all md:w-1/2">
{messages.map((message, index) => {
return (
<ConversationBubble
className="mt-5"
ref={index === messages.length - 1 ? endMessageRef : null}
className="mb-7"
key={index}
message={message.text}
type={message.type}

24
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -1,18 +1,18 @@
import { forwardRef } from 'react';
import Avatar from '../Avatar';
import { User } from '../models/misc';
import { MESSAGE_TYPE } from './conversationModels';
export default function ConversationBubble({
message,
type,
className,
}: {
message: string;
type: MESSAGE_TYPE;
className: string;
}) {
const ConversationBubble = forwardRef<
HTMLDivElement,
{
message: string;
type: MESSAGE_TYPE;
className: string;
}
>(function ConversationBubble({ message, type, className }, ref) {
return (
<div
ref={ref}
className={`flex rounded-3xl ${
type === 'QUESTION' ? '' : 'bg-gray-1000'
} py-7 px-5 ${className}`}
@@ -21,4 +21,6 @@ export default function ConversationBubble({
<p className="ml-5">{message}</p>
</div>
);
}
});
export default ConversationBubble;

27
frontend/src/conversation/conversationSlice.ts
View File

@@ -2,8 +2,33 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import store from '../store';
import { ConversationState, Message } from './conversationModels';
// harcoding the initial state just for demo
const initialState: ConversationState = {
conversation: [],
conversation: [
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{ text: 'ChatGPT is large learning model', type: 'ANSWER' },
{ text: 'what is ChatGPT', type: 'QUESTION' },
{
text: 'ChatGPT is large learning model',
type: 'ANSWER',
},
],
};
export const conversationSlice = createSlice({