adds bing ai functionality, still need to code out message/convo storing since it returns a lot of useful parameters

This commit is contained in:
Danny Avila 2023-02-15 12:29:56 -05:00
parent e0a26f52cd
commit 5c7000c273
11 changed files with 462 additions and 21 deletions

View file

@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import GPTIcon from '../svg/GPTIcon';
import BingIcon from '../svg/BingIcon';
// import useCustomEffect from '~/hooks/useCustomEffect';
export default function Message({
@ -11,7 +12,7 @@ export default function Message({
scrollToBottom
}) {
const { isSubmitting } = useSelector((state) => state.submit);
const blinker = isSubmitting && last && sender === 'GPT';
const blinker = isSubmitting && last && sender.toLowerCase() !== 'user';
useEffect(() => {
if (blinker) {
@ -24,25 +25,30 @@ export default function Message({
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
};
if (sender === 'GPT') {
if (sender.toLowerCase() !== 'user') {
props.className =
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
}
let icon = `${sender}:`;
const isGPT = sender === 'chatgpt' || sender === 'davinci';
if (sender.toLowerCase() !== 'user') {
icon = (
<div
style={ isGPT ? { backgroundColor: 'rgb(16, 163, 127)' } : {}}
className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
>
{ sender === 'bingai' ? <BingIcon /> : <GPTIcon />}
</div>
);
}
return (
<div {...props}>
<div className="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">
<strong className="relative flex w-[30px] flex-col items-end">
{sender === 'GPT' ? (
<div
style={{ backgroundColor: 'rgb(16, 163, 127)' }}
className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
>
<GPTIcon />
</div>
) : (
`${sender}:`
)}
{icon}
</strong>
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
<div className="flex flex-grow flex-col gap-3">