cleanup

package-lock.json

@@ -22,6 +22,7 @@
                 "next": "13.4.2",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
+                "react95": "^4.0.0",
                 "typescript": "5.0.4",
                 "uuid": "^9.0.0"
             },
@@ -137,6 +138,18 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/helper-annotate-as-pure": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+            "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+            "peer": true,
+            "dependencies": {
+                "@babel/types": "^7.18.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/helper-compilation-targets": {
             "version": "7.22.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
@@ -478,6 +491,33 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@emotion/is-prop-valid": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+            "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+            "peer": true,
+            "dependencies": {
+                "@emotion/memoize": "^0.8.1"
+            }
+        },
+        "node_modules/@emotion/memoize": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+            "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+            "peer": true
+        },
+        "node_modules/@emotion/stylis": {
+            "version": "0.8.5",
+            "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+            "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+            "peer": true
+        },
+        "node_modules/@emotion/unitless": {
+            "version": "0.7.5",
+            "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+            "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+            "peer": true
+        },
         "node_modules/@esbuild/android-arm": {
             "version": "0.17.19",
             "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -1777,6 +1817,28 @@
                 "deep-equal": "^2.0.5"
             }
         },
+        "node_modules/babel-plugin-styled-components": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz",
+            "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==",
+            "peer": true,
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.18.6",
+                "@babel/helper-module-imports": "^7.21.4",
+                "babel-plugin-syntax-jsx": "^6.18.0",
+                "lodash": "^4.17.21",
+                "picomatch": "^2.3.1"
+            },
+            "peerDependencies": {
+                "styled-components": ">= 2"
+            }
+        },
+        "node_modules/babel-plugin-syntax-jsx": {
+            "version": "6.18.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+            "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==",
+            "peer": true
+        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1962,6 +2024,15 @@
                 "node": ">=6"
             }
         },
+        "node_modules/camelize": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+            "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+            "peer": true,
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001492",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001492.tgz",
@@ -2096,6 +2167,26 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/css-color-keywords": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+            "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+            "peer": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/css-to-react-native": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+            "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+            "peer": true,
+            "dependencies": {
+                "camelize": "^1.0.0",
+                "css-color-keywords": "^1.0.0",
+                "postcss-value-parser": "^4.0.2"
+            }
+        },
         "node_modules/csstype": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -3468,6 +3559,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "peer": true,
+            "dependencies": {
+                "react-is": "^16.7.0"
+            }
+        },
         "node_modules/human-signals": {
             "version": "4.3.1",
             "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@@ -4304,6 +4404,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "peer": true
+        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5282,6 +5388,26 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "node_modules/react95": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/react95/-/react95-4.0.0.tgz",
+            "integrity": "sha512-C/2Ecws+ShHMJa3/ki6d3ufCukEYyZ+up45NJhX+uecFh5sXNdkEX8bPZ4pKTGl0mSTMkiCJTGOJB1Gmf1W3dA==",
+            "funding": [
+                {
+                    "type": "paypal",
+                    "url": "https://www.paypal.me/react95"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/arturbien"
+                }
+            ],
+            "peerDependencies": {
+                "react": ">= 16.8.0",
+                "react-dom": ">= 16.8.0",
+                "styled-components": ">= 5.3.3"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -5628,6 +5754,12 @@
                 "node": ">=10"
             }
         },
+        "node_modules/shallowequal": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+            "peer": true
+        },
         "node_modules/sharp": {
             "version": "0.32.1",
             "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
@@ -5888,6 +6020,57 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/styled-components": {
+            "version": "5.3.11",
+            "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+            "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+            "peer": true,
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.0.0",
+                "@babel/traverse": "^7.4.5",
+                "@emotion/is-prop-valid": "^1.1.0",
+                "@emotion/stylis": "^0.8.4",
+                "@emotion/unitless": "^0.7.4",
+                "babel-plugin-styled-components": ">= 1.12.0",
+                "css-to-react-native": "^3.0.0",
+                "hoist-non-react-statics": "^3.0.0",
+                "shallowequal": "^1.1.0",
+                "supports-color": "^5.5.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/styled-components"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8.0",
+                "react-dom": ">= 16.8.0",
+                "react-is": ">= 16.8.0"
+            }
+        },
+        "node_modules/styled-components/node_modules/has-flag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+            "peer": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/styled-components/node_modules/supports-color": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+            "peer": true,
+            "dependencies": {
+                "has-flag": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/styled-jsx": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",

package.json

@@ -22,6 +22,7 @@
         "next": "13.4.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react95": "^4.0.0",
         "typescript": "5.0.4",
         "uuid": "^9.0.0"
     },

src/components/Chat/Chat.tsx

@@ -1,355 +0,0 @@
-import { IconClearAll, IconSettings } from '@tabler/icons-react';
-import {
-  MutableRefObject,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import {
-  saveConversation,
-  saveConversations,
-  updateConversation,
-  throttle
-} from '@/utils';
-
-import { ChatBody, Conversation, Message } from '@/types/chat';
-
-import HomeContext from '@/pages/api/home.context';
-
-import { ChatInput } from './ChatInput';
-import { ChatLoader } from './ChatLoader';
-
-interface Props {
-  stopConversationRef: MutableRefObject<boolean>;
-}
-
-export const Chat = memo(({ stopConversationRef }: Props) => {
-  const {
-    state: {
-      selectedConversation,
-      conversations,
-      loading
-    },
-    handleUpdateConversation,
-    dispatch: homeDispatch,
-  }: any = useContext(HomeContext);
-
-  const [currentMessage, setCurrentMessage] = useState<Message>();
-  const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
-  const [showSettings, setShowSettings] = useState<boolean>(false);
-  const [showScrollDownButton, setShowScrollDownButton] =
-    useState<boolean>(false);
-
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const chatContainerRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSend = useCallback(
-    async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
-      if (selectedConversation) {
-        let updatedConversation: Conversation;
-        if (deleteCount) {
-          const updatedMessages = [...selectedConversation.messages];
-          for (let i = 0; i < deleteCount; i++) {
-            updatedMessages.pop();
-          }
-          updatedConversation = {
-            ...selectedConversation,
-            messages: [...updatedMessages, message],
-          };
-        } else {
-          updatedConversation = {
-            ...selectedConversation,
-            messages: [...selectedConversation.messages, message],
-          };
-        }
-        homeDispatch({
-          field: 'selectedConversation',
-          value: updatedConversation,
-        });
-        homeDispatch({ field: 'loading', value: true });
-        homeDispatch({ field: 'messageIsStreaming', value: true });
-        const chatBody: ChatBody = {
-          model: updatedConversation.model,
-          messages: updatedConversation.messages,
-          prompt: updatedConversation.prompt
-        };
-        const endpoint = "/v1/api/create"
-        const body = JSON.stringify(chatBody);
-        const controller = new AbortController();
-        const response = await fetch(endpoint, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          signal: controller.signal,
-          body,
-        });
-        if (!response.ok) {
-          homeDispatch({ field: 'loading', value: false });
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-          console.error(response.statusText);
-          return;
-        }
-        const data = response.body;
-        if (!data) {
-          homeDispatch({ field: 'loading', value: false });
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-          return;
-        }
-        if (!plugin) {
-          if (updatedConversation.messages.length === 1) {
-            const { content } = message;
-            const customName =
-              content.length > 30 ? content.substring(0, 30) + '...' : content;
-            updatedConversation = {
-              ...updatedConversation,
-              name: customName,
-            };
-          }
-          homeDispatch({ field: 'loading', value: false });
-          const reader = data.getReader();
-          const decoder = new TextDecoder();
-          let done = false;
-          let isFirst = true;
-          let text = '';
-          while (!done) {
-            if (stopConversationRef.current === true) {
-              controller.abort();
-              done = true;
-              break;
-            }
-            const { value, done: doneReading } = await reader.read();
-            done = doneReading;
-            const chunkValue = decoder.decode(value);
-            text += chunkValue;
-            if (isFirst) {
-              isFirst = false;
-              const updatedMessages: Message[] = [
-                ...updatedConversation.messages,
-                { role: 'assistant', content: chunkValue },
-              ];
-              updatedConversation = {
-                ...updatedConversation,
-                messages: updatedMessages,
-              };
-              homeDispatch({
-                field: 'selectedConversation',
-                value: updatedConversation,
-              });
-            } else {
-              const updatedMessages: Message[] =
-                updatedConversation.messages.map((message: any, index: number) => {
-                  if (index === updatedConversation.messages.length - 1) {
-                    return {
-                      ...message,
-                      content: text,
-                    };
-                  }
-                  return message;
-                });
-              updatedConversation = {
-                ...updatedConversation,
-                messages: updatedMessages,
-              };
-              homeDispatch({
-                field: 'selectedConversation',
-                value: updatedConversation,
-              });
-            }
-          }
-          saveConversation(updatedConversation);
-          const updatedConversations: Conversation[] = conversations.map(
-            (conversation: { id: any; }) => {
-              if (conversation.id === selectedConversation.id) {
-                return updatedConversation;
-              }
-              return conversation;
-            },
-          );
-          if (updatedConversations.length === 0) {
-            updatedConversations.push(updatedConversation);
-          }
-          homeDispatch({ field: 'conversations', value: updatedConversations });
-          saveConversations(updatedConversations);
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-        } else {
-          const { answer } = await response.json();
-          const updatedMessages: Message[] = [
-            ...updatedConversation.messages,
-            { role: 'assistant', content: answer },
-          ];
-          updatedConversation = {
-            ...updatedConversation,
-            messages: updatedMessages,
-          };
-          homeDispatch({
-            field: 'selectedConversation',
-            value: updateConversation,
-          });
-          saveConversation(updatedConversation);
-          const updatedConversations: Conversation[] = conversations.map(
-            (conversation: { id: any; }) => {
-              if (conversation.id === selectedConversation.id) {
-                return updatedConversation;
-              }
-              return conversation;
-            },
-          );
-          if (updatedConversations.length === 0) {
-            updatedConversations.push(updatedConversation);
-          }
-          homeDispatch({ field: 'conversations', value: updatedConversations });
-          saveConversations(updatedConversations);
-          homeDispatch({ field: 'loading', value: false });
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-        }
-      }
-    },
-    [
-      conversations,
-      selectedConversation,
-      stopConversationRef,
-    ],
-  );
-
-  const handleScroll = () => {
-    if (chatContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } =
-        chatContainerRef.current;
-      const bottomTolerance = 30;
-
-      if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
-        setAutoScrollEnabled(false);
-        setShowScrollDownButton(true);
-      } else {
-        setAutoScrollEnabled(true);
-        setShowScrollDownButton(false);
-      }
-    }
-  };
-
-  const handleScrollDown = () => {
-    chatContainerRef.current?.scrollTo({
-      top: chatContainerRef.current.scrollHeight,
-      behavior: 'smooth',
-    });
-  };
-
-  const handleSettings = () => {
-    setShowSettings(!showSettings);
-  };
-
-  const onClearAll = () => {
-    if (
-      confirm('Are you sure you want to clear all messages?') &&
-      selectedConversation
-    ) {
-      handleUpdateConversation(selectedConversation, {
-        key: 'messages',
-        value: [],
-      });
-    }
-  };
-
-  const scrollDown = () => {
-    if (autoScrollEnabled) {
-      messagesEndRef.current?.scrollIntoView(true);
-    }
-  };
-  const throttledScrollDown = throttle(scrollDown, 250);
-
-  useEffect(() => {
-    throttledScrollDown();
-    selectedConversation &&
-      setCurrentMessage(
-        selectedConversation.messages[selectedConversation.messages.length - 2],
-      );
-  }, [selectedConversation, throttledScrollDown]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setAutoScrollEnabled(entry.isIntersecting);
-        if (entry.isIntersecting) {
-          textareaRef.current?.focus();
-        }
-      },
-      {
-        root: null,
-        threshold: 0.5,
-      },
-    );
-    const messagesEndElement = messagesEndRef.current;
-    if (messagesEndElement) {
-      observer.observe(messagesEndElement);
-    }
-    return () => {
-      if (messagesEndElement) {
-        observer.unobserve(messagesEndElement);
-      }
-    };
-  }, [messagesEndRef]);
-
-  return (
-    <div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
-          <div
-            className="max-h-full overflow-x-hidden"
-            ref={chatContainerRef}
-            onScroll={handleScroll}
-          >
-            {selectedConversation?.messages.length === 0 ? (
-              <>
-                <div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px]">
-                  
-                  
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="sticky top-0 z-10 flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
-                  <button
-                    className="ml-2 cursor-pointer hover:opacity-50"
-                    onClick={handleSettings}
-                  >
-                    <IconSettings size={18} />
-                  </button>
-                  <button
-                    className="ml-2 cursor-pointer hover:opacity-50"
-                    onClick={onClearAll}
-                  >
-                    <IconClearAll size={18} />
-                  </button>
-                </div>
-                {loading && <ChatLoader />}
-                <div
-                  className="h-[162px] bg-white dark:bg-[#343541]"
-                  ref={messagesEndRef}
-                />
-              </>
-            )}
-          </div>
-
-          <ChatInput
-            stopConversationRef={stopConversationRef}
-            textareaRef={textareaRef}
-            onSend={(message: any) => {
-              setCurrentMessage(message);
-              handleSend(message, 0);
-            }}
-            onScrollDownClick={handleScrollDown}
-            onRegenerate={() => {
-              if (currentMessage) {
-                handleSend(currentMessage, 2, null);
-              }
-            }}
-            showScrollDownButton={showScrollDownButton}
-          />
-    </div>
-  );
-});
-Chat.displayName = 'Chat';

src/components/Chat/ChatInput.tsx

@@ -1,251 +0,0 @@
-import {
-IconPlayerStop,
-IconRepeat,
-IconSend,
-} from '@tabler/icons-react';
-import {
-KeyboardEvent,
-MutableRefObject,
-useCallback,
-useContext,
-useEffect,
-useRef,
-useState,
-} from 'react';
-  
-import { Message } from '@/types/chat';
-import { Prompt } from '@/types/prompt';
-
-import HomeContext from '@/pages/api/home.context';
-  
-interface Props {
-onSend: (message: Message) => void;
-onRegenerate: () => void;
-onScrollDownClick: () => void;
-stopConversationRef: MutableRefObject<boolean>;
-textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
-showScrollDownButton: boolean;
-}
-
-export const ChatInput = ({
-onSend,
-onRegenerate,
-stopConversationRef,
-textareaRef,
-}: Props) => {
-
-const {
-    state: { selectedConversation, messageIsStreaming, prompts },
-
-    dispatch: homeDispatch,
-}: any = useContext(HomeContext);
-
-const [content, setContent] = useState<string>();
-const [isTyping, setIsTyping] = useState<boolean>(false);
-const [showPromptList, setShowPromptList] = useState(false);
-const [activePromptIndex, setActivePromptIndex] = useState(0);
-const [promptInputValue, setPromptInputValue] = useState('');
-const [variables, setVariables] = useState<string[]>([]);
-
-const promptListRef = useRef<HTMLUListElement | null>(null);
-
-const filteredPrompts = prompts.filter((prompt: { name: string; }) =>
-    prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
-);
-
-const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value;
-    const maxLength = selectedConversation?.model.maxLength;
-
-    if (maxLength && value.length > maxLength) {
-    alert(
-        `Message limit is ${maxLength} characters. You have entered ${value.length} characters.`,
-    );
-    return;
-    }
-
-    setContent(value);
-    updatePromptListVisibility(value);
-};
-
-const handleSend = () => {
-    if (messageIsStreaming) {
-    return;
-    }
-
-    if (!content) {
-    alert('Please enter a message');
-    return;
-    }
-
-    onSend({ role: 'user', content });
-    setContent('');
-
-    if (window.innerWidth < 640 && textareaRef && textareaRef.current) {
-    textareaRef.current.blur();
-    }
-};
-
-const handleStopConversation = () => {
-    stopConversationRef.current = true;
-    setTimeout(() => {
-    stopConversationRef.current = false;
-    }, 1000);
-};
-
-const isMobile = () => {
-    const userAgent =
-    typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
-    const mobileRegex =
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
-    return mobileRegex.test(userAgent);
-};
-
-const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !isTyping && !isMobile() && !e.shiftKey) {
-    e.preventDefault();
-    handleSend();
-    } else if (e.key === '/' && e.metaKey) {
-    e.preventDefault();
-    
-    }
-};
-
-const parseVariables = (content: string) => {
-    const regex = /{{(.*?)}}/g;
-    const foundVariables = [];
-    let match;
-
-    while ((match = regex.exec(content)) !== null) {
-    foundVariables.push(match[1]);
-    }
-
-    return foundVariables;
-};
-
-const updatePromptListVisibility = useCallback((text: string) => {
-    const match = text.match(/\/\w*$/);
-
-    if (match) {
-    setShowPromptList(true);
-    setPromptInputValue(match[0].slice(1));
-    } else {
-    setShowPromptList(false);
-    setPromptInputValue('');
-    }
-}, []);
-
-
-const handleSubmit = (updatedVariables: string[]) => {
-    const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => {
-    const index = variables.indexOf(variable);
-    return updatedVariables[index];
-    });
-
-    setContent(newContent);
-
-    if (textareaRef && textareaRef.current) {
-    textareaRef.current.focus();
-    }
-};
-
-useEffect(() => {
-    if (promptListRef.current) {
-    promptListRef.current.scrollTop = activePromptIndex * 30;
-    }
-}, [activePromptIndex]);
-
-useEffect(() => {
-    if (textareaRef && textareaRef.current) {
-    textareaRef.current.style.height = 'inherit';
-    textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
-    textareaRef.current.style.overflow = `${
-        textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
-    }`;
-    }
-}, [content]);
-
-useEffect(() => {
-    const handleOutsideClick = (e: MouseEvent) => {
-    if (
-        promptListRef.current &&
-        !promptListRef.current.contains(e.target as Node)
-    ) {
-        setShowPromptList(false);
-    }
-    };
-
-    window.addEventListener('click', handleOutsideClick);
-
-    return () => {
-    window.removeEventListener('click', handleOutsideClick);
-    };
-}, []);
-
-return (
-    <div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
-    <div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
-        {messageIsStreaming && (
-        <button
-            className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:mb-0 md:mt-2"
-            onClick={handleStopConversation}
-        >
-            <IconPlayerStop size={16} /> {'Stop Generating'}
-        </button>
-        )}
-
-        {!messageIsStreaming &&
-        selectedConversation &&
-        selectedConversation.messages.length > 0 && (
-            <button
-            className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:mb-0 md:mt-2"
-            onClick={onRegenerate}
-            >
-            <IconRepeat size={16} /> {'Regenerate response'}
-            </button>
-        )}
-
-        <div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
-
-        <textarea
-            ref={textareaRef}
-            className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-10 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-10"
-            style={{
-            resize: 'none',
-            bottom: `${textareaRef?.current?.scrollHeight}px`,
-            maxHeight: '400px',
-            overflow: `${
-                textareaRef.current && textareaRef.current.scrollHeight > 400
-                ? 'auto'
-                : 'hidden'
-            }`,
-            }}
-            placeholder={
-            'Type a message or type "/" to select a prompt...' || ''
-            }
-            value={content}
-            rows={1}
-            onCompositionStart={() => setIsTyping(true)}
-            onCompositionEnd={() => setIsTyping(false)}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-        />
-
-        <button
-            className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
-            onClick={handleSend}
-        >
-            {messageIsStreaming ? (
-            <div className="h-4 w-4 animate-spin rounded-full border-t-2 border-neutral-800 opacity-60 dark:border-neutral-100"></div>
-            ) : (
-            <IconSend size={18} />
-            )}
-        </button>
-        </div>
-    </div>
-    <div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
-        
-    </div>
-    </div>
-    );
-};

src/components/Chat/ChatLoader.tsx

@@ -1,20 +0,0 @@
-import { IconRobot } from '@tabler/icons-react';
-import { FC } from 'react';
-
-interface Props { }
-
-export const ChatLoader: FC<Props> = () => {
-  return (
-    <div
-      className="group border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100"
-      style={{ overflowWrap: 'anywhere' }}
-    >
-      <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">
-        <div className="min-w-[40px] items-end">
-          <IconRobot size={30} />
-        </div>
-        <span className="animate-pulse cursor-default mt-1">▍</span>
-      </div>
-    </div>
-  );
-};

src/components/ChatWindow.jsx

@@ -54,8 +54,8 @@ function ChatWindow({
       <div className="window-content w-full">
         <div className="flex flex-col w-full">
           <MessageList
-            screenName={"screenName"}
-            assistantScreenName={"assistantScreenName"}
+            screenName={"me"}
+            assistantScreenName={"vicuna"}
           />
           {/* <Separator /> */}
           <div className="h-4" />

src/components/Loader.jsx

@@ -28,11 +28,13 @@ const Loader = () => {
             alignItems: "center",
             flexDirection: "column",
             gap: "10px",
+            fontSize: "24px",
+            textAlign: "center"
           }}
         >
           <div className="lg:hidden">
             <p className="p-1">
-              web-llm-embed
+              <b>web-llm-embed</b>
             </p>
             <p className="p-1">
               No data is sent to the server. Conversations are cached in local
@@ -44,6 +46,9 @@ const Loader = () => {
             <p className="p-1">
               Powered by Apache TVM and MLC Relax Runtime.
             </p>
+            <p className="p-1">
+              Model is currently Vicuna 13B trained by LLMSys
+            </p>
           </div>
           <div>
             This will download the model and may take a few minutes. After the

src/components/MessageList.jsx

@@ -1,5 +1,6 @@
 import useLLM from "@react-llm/headless";
 import { useEffect, useRef } from "react";
+import { ScrollView } from "react95";
 
 function MessageList({
   screenName = "endlessbox5",
@@ -20,7 +21,7 @@ function MessageList({
   }, [conversation, messages.length]);
 
   return (
-    <div style={{ height: "350px" }} className="w-full">
+    <ScrollView style={{ height: "350px" }} className="w-full">
       <div className="p-2 leading-6 w-full min-h-full">
         {conversation?.messages.map((m) => (
           <div key={m.id} style={{ display: "flex" }}>
@@ -44,7 +45,7 @@ function MessageList({
         ))}
         <div ref={scrollRef}></div>
       </div>
-    </div>
+    </ScrollView>
   );
 }
 

src/pages/api/home.context.tsx

@@ -1,23 +0,0 @@
-import { Dispatch, createContext } from 'react';
-
-import { ActionType } from '@/utils/';
-
-import { Conversation } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-
-import { HomeInitialState } from './home.state';
-
-export interface HomeContextProps {
-  state: HomeInitialState;
-  dispatch: Dispatch<ActionType<HomeInitialState>>;
-  handleNewConversation: () => void;
-  handleSelectConversation: (conversation: Conversation) => void;
-  handleUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-}
-
-const HomeContext = createContext<HomeContextProps>(undefined!);
-
-export default HomeContext;

src/pages/api/home.state.tsx

@@ -1,42 +0,0 @@
-import { Conversation, Message } from '@/types/chat';
-import { Prompt } from '@/types/prompt';
-
-export interface HomeInitialState {
-  loading: boolean;
-  lightMode: 'light' | 'dark';
-  messageIsStreaming: boolean;
-  modelError: any | null;
-  models: any[];
-  conversations: Conversation[];
-  selectedConversation: Conversation | undefined;
-  currentMessage: Message | undefined;
-  prompts: Prompt[];
-  temperature: number;
-  showChatbar: boolean;
-  showPromptbar: boolean;
-  messageError: boolean;
-  searchTerm: string;
-  defaultModelId: any | undefined;
-  serverSideApiKeyIsSet: boolean;
-  serverSidePluginKeysSet: boolean;
-}
-
-export const initialState: HomeInitialState = {
-  loading: false,
-  lightMode: 'dark',
-  messageIsStreaming: false,
-  modelError: null,
-  models: [],
-  conversations: [],
-  selectedConversation: undefined,
-  currentMessage: undefined,
-  prompts: [],
-  temperature: 1,
-  showPromptbar: true,
-  showChatbar: true,
-  messageError: false,
-  searchTerm: '',
-  defaultModelId: undefined,
-  serverSideApiKeyIsSet: false,
-  serverSidePluginKeysSet: false,
-};

src/pages/api/home.tsx

@@ -1,157 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import { GetServerSideProps } from 'next';
-import Head from 'next/head';
-import {
-    DEFAULT_SYSTEM_PROMPT,
-    DEFAULT_TEMPERATURE,
-    saveConversation,
-    saveConversations,
-    updateConversation,
-    useCreateReducer
-} from '@/utils';
-
-import { Chat } from '@/components/Chat/Chat';
-
-import HomeContext from './home.context';
-import { HomeInitialState, initialState } from './home.state';
-
-import { v4 as uuidv4 } from 'uuid';
-
-interface Props {
-  serverSideApiKeyIsSet: boolean;
-  serverSidePluginKeysSet: boolean;
-  defaultModelId: any;
-}
-
-const Home = ({
-  defaultModelId,
-}: Props) => {
-  const contextValue = useCreateReducer<HomeInitialState>({
-    initialState,
-  });
-
-  const {
-    state: {
-      lightMode,
-      conversations,
-      selectedConversation      
-    },
-    dispatch,
-  } = contextValue;
-
-  const stopConversationRef = useRef<boolean>(false);
-
-  // FETCH MODELS ----------------------------------------------
-
-  const handleSelectConversation = (conversation: any) => {
-    dispatch({
-      field: 'selectedConversation',
-      value: conversation,
-    });
-
-    saveConversation(conversation);
-  };
-
-  // CONVERSATION OPERATIONS  --------------------------------------------
-
-  const handleNewConversation = () => {
-    const lastConversation = conversations[conversations.length - 1];
-
-    const newConversation: any = {
-      id: uuidv4(),
-      name: 'New Conversation',
-      messages: [],
-      model: lastConversation?.model || {
-        id: "OpenAIModels[defaultModelId].id",
-        name: "OpenAIModels[defaultModelId].name",
-        maxLength: "OpenAIModels[defaultModelId].maxLength",
-        tokenLimit: "OpenAIModels[defaultModelId].tokenLimit",
-      },
-      prompt: DEFAULT_SYSTEM_PROMPT,
-      temperature: lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
-      folderId: null,
-    };
-
-    const updatedConversations = [...conversations, newConversation];
-
-    dispatch({ field: 'selectedConversation', value: newConversation });
-    dispatch({ field: 'conversations', value: updatedConversations });
-
-    saveConversation(newConversation);
-    saveConversations(updatedConversations);
-
-    dispatch({ field: 'loading', value: false });
-  };
-
-  const handleUpdateConversation = (
-    conversation: any,
-    data: any,
-  ) => {
-    const updatedConversation = {
-      ...conversation,
-      [data.key]: data.value,
-    };
-
-    const { single, all } = updateConversation(
-      updatedConversation,
-      conversations,
-    );
-
-    dispatch({ field: 'selectedConversation', value: single });
-    dispatch({ field: 'conversations', value: all });
-  };
-
-  // EFFECTS  --------------------------------------------
-
-  useEffect(() => {
-    if (window.innerWidth < 640) {
-      dispatch({ field: 'showChatbar', value: false });
-    }
-  }, [selectedConversation]);
-
-  // ON LOAD --------------------------------------------
-
-  return (
-    <HomeContext.Provider
-      value={{
-        ...contextValue,
-        handleNewConversation,
-        handleSelectConversation,
-        handleUpdateConversation,
-      }}
-    >
-      <Head>
-        <title>Web LLM Embed</title>
-        <meta name="description" content="Web LLM Embed" />
-        <meta
-          name="viewport"
-          content="height=device-height ,width=device-width, initial-scale=1, user-scalable=no"
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main
-          className={`flex h-screen w-screen flex-col text-sm text-white dark:text-white ${lightMode}`}
-        >
-          <div className="flex h-full w-full pt-[48px] sm:pt-0">
-            <div className="flex flex-1">
-              <Chat stopConversationRef={stopConversationRef} />
-            </div>
-          </div>
-        </main>
-    </HomeContext.Provider>
-  );
-};
-export default Home;
-
-export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
-  const defaultModelId = "fallbackModelID"
-
-  return {
-    props: {
-      defaultModelId
-    },
-  };
-};
-
-

src/utils/file-handler.ts

@@ -1,5 +1,5 @@
+import { XenovaTransformersEmbeddings } from '@/embed/hf';
 import fs from 'fs-extra';
-import type { OpenAIEmbeddings } from 'langchain/embeddings/openai';
 import {
   HNSWLib,
   type HNSWLib as StoreTypeHNSWLib,
@@ -26,7 +26,7 @@ const HNSWLibModelFilesName = {
 // looking forward to a better way to transfrom hnswlibStore <=> indexes
 export async function HNSWLibModelToVectorStore(
   model: HNSWLibModel,
-  embeddings: OpenAIEmbeddings,
+  embeddings: XenovaTransformersEmbeddings,
 ) {
   await saveHNSWLibModelToLocal(model);
   // load from dir

src/utils/index.ts

@@ -1,4 +1,3 @@
-import { Conversation } from '@/types/chat';
 import { useMemo, useReducer } from 'react';
 
 // Extracts property names from initial state of reducer to allow typesafe dispatch objects
@@ -30,35 +29,6 @@ export const useCreateReducer = <T>({ initialState }: { initialState: T }) => {
   return useMemo(() => ({ state, dispatch }), [state, dispatch]);
 };
 
-export const updateConversation = (
-  updatedConversation: Conversation,
-  allConversations: Conversation[],
-) => {
-  const updatedConversations = allConversations.map((c) => {
-    if (c.id === updatedConversation.id) {
-      return updatedConversation;
-    }
-
-    return c;
-  });
-
-  saveConversation(updatedConversation);
-  saveConversations(updatedConversations);
-
-  return {
-    single: updatedConversation,
-    all: updatedConversations,
-  };
-};
-
-export const saveConversation = (conversation: Conversation) => {
-  localStorage.setItem('selectedConversation', JSON.stringify(conversation));
-};
-
-export const saveConversations = (conversations: Conversation[]) => {
-  localStorage.setItem('conversationHistory', JSON.stringify(conversations));
-};
-
 
 export function throttle<T extends (...args: any[]) => any>(
     func: T,