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

src/components/main/Message.jsx

@@ -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">

src/components/main/ModelMenu.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setModel } from '~/store/submitSlice';
 import GPTIcon from '../svg/GPTIcon';
+import BingIcon from '../svg/BingIcon';
 import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 
 import { Button } from '../ui/Button.tsx';
@@ -44,6 +45,7 @@ export default function ModelMenu() {
   ];
 
   const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
+  const icon = model === 'bingai' ? <BingIcon button={true} /> : <GPTIcon button={true} /> ;
 
   return (
     <DropdownMenu>
@@ -53,7 +55,7 @@ export default function ModelMenu() {
           // style={{backgroundColor: 'rgb(16, 163, 127)'}}
           className={`absolute bottom-0.5 rounded-md border-0 p-1 pl-2 outline-none ${colorProps.join(' ')} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 md:pl-1 md:bottom-1 md:left-2 md:disabled:bottom-1`}
         >
-          <GPTIcon button={true} />
+          {icon}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
@@ -63,6 +65,7 @@ export default function ModelMenu() {
           value={model}
           onValueChange={onChange}
         >
+          <DropdownMenuRadioItem value="bingai">BingAI</DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="chatgpt">ChatGPT</DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="davinci">Davinci</DropdownMenuRadioItem>
           {/* <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem> */}

src/components/main/TextChat.jsx

@@ -30,11 +30,11 @@ export default function TextChat({ messages }) {
     dispatch(setSubmitState(true));
     const message = text.trim();
     const currentMsg = { sender: 'User', text: message, current: true };
-    const initialResponse = { sender: 'GPT', text: '' };
+    const initialResponse = { sender: model, text: '' };
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
     dispatch(setText(''));
     const messageHandler = (data) => {
-      dispatch(setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]));
+      dispatch(setMessages([...messages, currentMsg, { sender: model, text: data }]));
     };
     const convoHandler = (data) => {
       console.log('in convo handler');