mirror of https://github.com/arc53/DocsGPT
adds conversation slice and acomoddates conversation component with the
data typespull/100/head
parent
d20b5f3e09
commit
5b456cda16
@ -1,28 +1,27 @@
|
|||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import Hero from '../Hero';
|
||||||
import ConversationBubble from './ConversationBubble';
|
import ConversationBubble from './ConversationBubble';
|
||||||
import ConversationInput from './ConversationInput';
|
import ConversationInput from './ConversationInput';
|
||||||
|
import { selectConversation } from './conversationSlice';
|
||||||
|
|
||||||
export default function Conversation() {
|
export default function Conversation() {
|
||||||
// uncomment below JSX to see the sample harcoded chat box
|
const messages = useSelector(selectConversation);
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center p-6">
|
<div className="flex justify-center p-6">
|
||||||
{/* <div className="w-10/12 transition-all md:w-1/2">
|
<div className="w-10/12 transition-all md:w-1/2">
|
||||||
{new Array(10).fill(1).map((item, index) => {
|
{messages.map((message, index) => {
|
||||||
return (
|
return (
|
||||||
<ConversationBubble
|
<ConversationBubble
|
||||||
className="mt-5"
|
className="mt-5"
|
||||||
key={index}
|
key={index}
|
||||||
user={index % 2 === 0 ? { avatar: '🦖' } : { avatar: '👤' }}
|
message={message.text}
|
||||||
message={
|
type={message.type}
|
||||||
index % 2 === 0
|
|
||||||
? 'A chatbot is a computer program that simulates human conversation through voice commands or text chats or both. It can be integrated with various messaging platforms like Facebook Messenger, WhatsApp, WeChat, etc.'
|
|
||||||
: 'what is DocsGPT'
|
|
||||||
}
|
|
||||||
isCurrentUser={index % 2 === 0 ? false : true}
|
|
||||||
></ConversationBubble>
|
></ConversationBubble>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
{messages.length === 0 && <Hero className="mt-24"></Hero>}
|
||||||
</div>
|
</div>
|
||||||
<ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput> */}
|
<ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,10 @@
|
|||||||
|
export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
|
||||||
|
|
||||||
|
export interface Message {
|
||||||
|
text: string;
|
||||||
|
type: MESSAGE_TYPE;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConversationState {
|
||||||
|
conversation: Message[];
|
||||||
|
}
|
Loading…
Reference in New Issue