barebones

package-lock.json

@@ -10,6 +10,7 @@
             "license": "MIT",
             "dependencies": {
                 "@react-llm/headless": "^0.0.5",
+                "@tabler/icons-react": "^2.21.0",
                 "@types/node": "20.1.4",
                 "@types/react": "18.2.6",
                 "@types/react-dom": "18.2.4",
@@ -20,7 +21,11 @@
                 "next": "13.4.2",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
-                "typescript": "5.0.4"
+                "typescript": "5.0.4",
+                "uuid": "^9.0.0"
+            },
+            "devDependencies": {
+                "@types/uuid": "^9.0.1"
             }
         },
         "node_modules/@ampproject/remapping": {
@@ -1319,6 +1324,31 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@tabler/icons": {
+            "version": "2.21.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.21.0.tgz",
+            "integrity": "sha512-XKrTEHMX6XzCOwcOU8ZNA+Xqm51sI+0abn2jk1fyQUpWeFnGsOEiC+fpQ4EISc+v+U9jqgTSbh8bZ6JBuKU5sw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            }
+        },
+        "node_modules/@tabler/icons-react": {
+            "version": "2.21.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.21.0.tgz",
+            "integrity": "sha512-iW/Eqqb7gILb8w/BgzCLZ/8DFZxojgiu12BYJFVuWIblLysXTZ2FjahY7m0VQ41vsyfDFWKofn1uvIPCfa8yGQ==",
+            "dependencies": {
+                "@tabler/icons": "2.21.0",
+                "prop-types": "^15.7.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            },
+            "peerDependencies": {
+                "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/@types/estree": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
@@ -1372,6 +1402,12 @@
             "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
             "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
         },
+        "node_modules/@types/uuid": {
+            "version": "9.0.1",
+            "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+            "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+            "dev": true
+        },
         "node_modules/@typescript-eslint/parser": {
             "version": "5.59.8",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.8.tgz",

package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "@react-llm/headless": "^0.0.5",
+        "@tabler/icons-react": "^2.21.0",
         "@types/node": "20.1.4",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
@@ -20,6 +21,10 @@
         "next": "13.4.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "typescript": "5.0.4"
+        "typescript": "5.0.4",
+        "uuid": "^9.0.0"
+    },
+    "devDependencies": {
+        "@types/uuid": "^9.0.1"
     }
 }

src/components/Chat/Chat.tsx

@@ -0,0 +1,354 @@
+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
+    },
+    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(t<string>('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, plugin: any) => {
+              setCurrentMessage(message);
+              handleSend(message, 0, plugin);
+            }}
+            onScrollDownClick={handleScrollDown}
+            onRegenerate={() => {
+              if (currentMessage) {
+                handleSend(currentMessage, 2, null);
+              }
+            }}
+            showScrollDownButton={showScrollDownButton}
+          />
+    </div>
+  );
+});
+Chat.displayName = 'Chat';

src/components/Chat/ChatInput.tsx

@@ -0,0 +1,265 @@
+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 handlePromptSelect = (prompt: Prompt) => {
+    const parsedVariables = parseVariables(prompt.content);
+    setVariables(parsedVariables);
+
+    if (parsedVariables.length > 0) {
+    setIsModalVisible(true);
+    } else {
+    setContent((prevContent) => {
+        const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content);
+        return updatedContent;
+    });
+    updatePromptListVisibility(prompt.content);
+    }
+};
+
+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

@@ -0,0 +1,20 @@
+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/pages/api/home.context.tsx

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,157 @@
+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/pages/index.tsx

@@ -1,13 +1 @@
-import Head from "next/head";
-
-export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>web-llm-embed</title>
-        <meta name="description" content="Web LLM Embed" />
-      </Head>
-      <div>web-llm-embed</div>
-    </>
-  );
-}
+export { default, getServerSideProps } from './api/home';

src/prompt/index.ts

@@ -0,0 +1,10 @@
+export const QA_PROMPT = `
+Your name is Ronnie C.
+Use the following pieces of context to answer the users question. 
+If you don't know the answer, just say that you don't know, don't try to make up an answer.
+Always answer from the perspective of being Ronnie C.
+----------------
+{context}
+
+Question: {question}
+Helpful Answer:`

src/types/chat.ts

@@ -0,0 +1,25 @@
+export interface Message {
+    role: Role;
+    content: string;
+  }
+  
+  export type Role = 'assistant' | 'user';
+  
+  export interface ChatBody {
+    model: any;
+    messages: Message[];
+    key: string;
+    prompt: string;
+    temperature: number;
+  }
+  
+  export interface Conversation {
+    id: string;
+    name: string;
+    messages: Message[];
+    model: any;
+    prompt: string;
+    temperature: number;
+    folderId: string | null;
+  }
+  

src/types/data.ts

@@ -0,0 +1,5 @@
+export interface KeyValuePair {
+    key: string;
+    value: any;
+  }
+  

src/types/prompt.ts

@@ -0,0 +1,10 @@
+export interface Prompt {
+    id: string;
+    name: string;
+    description: string;
+    content: string;
+    model: any;
+    folderId: string | null;
+  }
+  
+  

src/utils/index.ts

@@ -0,0 +1,91 @@
+import { Conversation } from '@/types/chat';
+import { useMemo, useReducer } from 'react';
+
+// Extracts property names from initial state of reducer to allow typesafe dispatch objects
+export type FieldNames<T> = {
+  [K in keyof T]: T[K] extends string ? K : K;
+}[keyof T];
+
+// Returns the Action Type for the dispatch object to be used for typing in things like context
+export type ActionType<T> =
+  | { type: 'reset' }
+  | { type?: 'change'; field: FieldNames<T>; value: any };
+
+// Returns a typed dispatch and state
+export const useCreateReducer = <T>({ initialState }: { initialState: T }) => {
+  type Action =
+    | { type: 'reset' }
+    | { type?: 'change'; field: FieldNames<T>; value: any };
+
+  const reducer = (state: T, action: Action) => {
+    if (!action.type) return { ...state, [action.field]: action.value };
+
+    if (action.type === 'reset') return initialState;
+
+    throw new Error();
+  };
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  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,
+    limit: number,
+  ): T {
+    let lastFunc: ReturnType<typeof setTimeout>;
+    let lastRan: number;
+  
+    return ((...args) => {
+      if (!lastRan) {
+        func(...args);
+        lastRan = Date.now();
+      } else {
+        clearTimeout(lastFunc);
+        lastFunc = setTimeout(() => {
+          if (Date.now() - lastRan >= limit) {
+            func(...args);
+            lastRan = Date.now();
+          }
+        }, limit - (Date.now() - lastRan));
+      }
+    }) as T;
+  }
+  
+  export const DEFAULT_SYSTEM_PROMPT =
+  process.env.NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT ||
+  "Follow the user's instructions carefully. Respond using markdown.";
+
+export const DEFAULT_TEMPERATURE = 
+  parseFloat(process.env.NEXT_PUBLIC_DEFAULT_TEMPERATURE || "1");