chore: reorganize client files for docker

client/src/components/Messages/Message.jsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import TextWrapper from './TextWrapper';
+import { useSelector } from 'react-redux';
+import GPTIcon from '../svg/GPTIcon';
+import BingIcon from '../svg/BingIcon';
+import HoverButtons from './HoverButtons';
+
+export default function Message({
+  sender,
+  text,
+  last = false,
+  error = false,
+  scrollToBottom
+}) {
+  const { isSubmitting } = useSelector((state) => state.submit);
+  const [abortScroll, setAbort] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const notUser = sender.toLowerCase() !== 'user';
+  const blinker = isSubmitting && last && notUser;
+
+  useEffect(() => {
+    if (blinker && !abortScroll) {
+      scrollToBottom();
+    }
+  }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
+
+  const handleWheel = () => {
+    if (blinker) {
+      setAbort(true);
+    } else {
+      setAbort(false);
+    }
+  };
+
+  const handleMouseOver = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHovering(false);
+  };
+
+  const props = {
+    className:
+      'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
+  };
+
+  const bgColors = {
+    chatgpt: 'rgb(16, 163, 127)',
+    chatgptBrowser: 'rgb(25, 207, 207)',
+    bingai: ''
+  };
+
+  let icon = `${sender}:`;
+  let backgroundColor = bgColors[sender];
+
+  if (notUser) {
+    props.className =
+    'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
+  }
+
+  if (notUser && backgroundColor || sender === 'bingai') {
+    icon = (
+      <div
+        style={{ backgroundColor }}
+        className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
+      >
+        {sender === 'bingai' ? <BingIcon /> : <GPTIcon />}
+      </div>
+    );
+  }
+
+  const wrapText = (text) => <TextWrapper text={text} />;
+
+  return (
+    <div
+      {...props}
+      onWheel={handleWheel}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      <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 text-right">
+          {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">
+            {error ? (
+              <div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
+                <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
+                  {text}
+                </div>
+              </div>
+            ) : (
+              <div className="flex min-h-[20px] flex-col items-start gap-4 whitespace-pre-wrap">
+                {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
+                <div className="markdown prose dark:prose-invert light w-full break-words">
+                  {notUser ? wrapText(text) : text}
+                  {blinker && <span className="result-streaming">█</span>}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex justify-between">
+            {isHovering && <HoverButtons user={!notUser} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}