mirror of https://github.com/arc53/DocsGPT
simplifies the APIKeyModal communication and state management, adds
conversation componentspull/98/head
parent
5341d03749
commit
10ac36ee7b
@ -0,0 +1,9 @@
|
|||||||
|
export default function Avatar({
|
||||||
|
avatar,
|
||||||
|
size,
|
||||||
|
}: {
|
||||||
|
avatar: string;
|
||||||
|
size?: 'SMALL' | 'MEDIUM' | 'LARGE';
|
||||||
|
}) {
|
||||||
|
return <div>{avatar}</div>;
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z" fill="black" fill-opacity="0.54"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 210 B |
@ -1,7 +1,28 @@
|
|||||||
|
import ConversationBubble from './ConversationBubble';
|
||||||
|
import ConversationInput from './ConversationInput';
|
||||||
|
|
||||||
export default function Conversation() {
|
export default function Conversation() {
|
||||||
|
// uncomment below JSX to see the sample harcoded chat box
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full p-6 text-center transition-all">
|
<div className="flex justify-center p-6">
|
||||||
Docs GPT Chat Placeholder
|
{/* <div className="w-10/12 transition-all md:w-1/2">
|
||||||
|
{new Array(10).fill(1).map((item, index) => {
|
||||||
|
return (
|
||||||
|
<ConversationBubble
|
||||||
|
className="mt-5"
|
||||||
|
key={index}
|
||||||
|
user={index % 2 === 0 ? { avatar: '🦖' } : { avatar: '👤' }}
|
||||||
|
message={
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,25 @@
|
|||||||
|
import Avatar from '../Avatar';
|
||||||
|
import { User } from '../models/misc';
|
||||||
|
|
||||||
|
export default function ConversationBubble({
|
||||||
|
user,
|
||||||
|
message,
|
||||||
|
isCurrentUser,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
user: User;
|
||||||
|
message: string;
|
||||||
|
isCurrentUser: boolean;
|
||||||
|
className: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`flex rounded-3xl ${
|
||||||
|
isCurrentUser ? '' : 'bg-gray-1000'
|
||||||
|
} py-7 px-5 ${className}`}
|
||||||
|
>
|
||||||
|
<Avatar avatar={user.avatar}></Avatar>
|
||||||
|
<p className="ml-5">{message}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,21 @@
|
|||||||
|
import Send from './../assets/send.svg';
|
||||||
|
|
||||||
|
export default function ConversationInput({
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={`${className} flex`}>
|
||||||
|
<div
|
||||||
|
contentEditable
|
||||||
|
className={`min-h-5 border-000000 overflow-x-hidden; max-h-24 w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
|
||||||
|
></div>
|
||||||
|
<img
|
||||||
|
onClick={() => console.log('here')}
|
||||||
|
src={Send}
|
||||||
|
className="relative right-9"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1 +1,5 @@
|
|||||||
export type ActiveState = 'ACTIVE' | 'INACTIVE';
|
export type ActiveState = 'ACTIVE' | 'INACTIVE';
|
||||||
|
|
||||||
|
export type User = {
|
||||||
|
avatar: string;
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue