Context refactor (#18)

* refactor to use context

* isThinking, cleanup

* format

Author: wildmolasses

src/components/ChatBox.tsx

@@ -1,38 +1,16 @@
-import { InputMessage } from "@/components/InputMessage";
+import { MessageInput } from "@/components/MessageInput";
 import { MessageList } from "@/components/MessageList";
-import { useState } from "react";
 
-export const ChatBox = ({
-  sendMessage,
-  owner,
-  messages,
-  ownerAvatar,
-  resetTyping,
-  typing,
-}) => {
-  const [isLoading, setIsLoading] = useState<Boolean>();
-  const sendMessageLoading = (sender, senderAvatar, message) => {
-    setIsLoading(true);
-    sendMessage(sender, senderAvatar, message);
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 400);
-  };
+export const ChatBox = () => {
   return (
-    <div className="flex flex-col rounded-md w-full max-h-full bg-white justify-between mb-10">
-      <div className="rounded-lg w-full overflow-auto">
-        <MessageList owner={owner} messages={messages} />
-      </div>
-      <div className="p-4">
-        <InputMessage
-          isLoading={isLoading}
-          owner={owner}
-          ownerAvatar={ownerAvatar}
-          sendMessage={sendMessage}
-          sendMessageLoading={sendMessageLoading}
-          typing={typing}
-          resetTyping={resetTyping}
-        />
+    <div className="flex justify-center h-full">
+      <div className="flex flex-col rounded-md w-full max-h-full bg-white justify-between mb-10">
+        <div className="rounded-lg w-full overflow-auto">
+          <MessageList />
+        </div>
+        <div className="p-4">
+          <MessageInput />
+        </div>
       </div>
     </div>
   );

src/components/DebugList.tsx

@@ -0,0 +1,9 @@
+import { Button } from "./Button";
+
+export const DebugPanel = () => {
+  return (
+    <div>
+      <Button></Button>
+    </div>
+  );
+};

src/components/InputMessage.tsx

@@ -0,0 +1,55 @@
+import { useChatContext } from "@/contexts/ChatContext";
+import { useState } from "react";
+
+export const MessageInput = ({}) => {
+  const [messageInput, setMessageInput] = useState<string>("");
+
+  const { addMessage } = useChatContext();
+
+  const handleSendMessage = (e) => {
+    e.preventDefault();
+    if (messageInput.length > 0) {
+      // TODO: await
+      addMessage({ isBot: false, payload: messageInput });
+      setMessageInput("");
+    }
+  };
+
+  const sendButtonIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="h-6 w-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+      />
+    </svg>
+  );
+
+  return (
+    <form onSubmit={handleSendMessage}>
+      <div className="flex">
+        <input
+          type="text"
+          onChange={(e) => setMessageInput(e.target.value)}
+          className="form-control mr-4 block w-full rounded-full border border-solid border-gray-300 bg-gray-300 bg-clip-padding px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-gray-300 focus:text-gray-700 focus:outline-none"
+          placeholder="Enter your message..."
+          tabIndex={0}
+          value={messageInput}
+        />
+        <button
+          className="relative float-right box-border h-10 w-10 cursor-pointer select-none rounded-full bg-blue-600 p-2 text-center text-white"
+          onClick={handleSendMessage}
+        >
+          {sendButtonIcon}
+        </button>
+      </div>
+    </form>
+  );
+};

src/components/MessageInput.tsx

@@ -1,15 +1,22 @@
-export const MessageItem = ({ owner, sender, senderAvatar, message }) => {
-  // orient right if I'm sender
-  const isSender = owner === sender;
+import { Message, useChatContext } from "@/contexts/ChatContext";
 
+export const MessageItem = ({ message }: { message: Message }) => {
+  const { isBot, payload } = message;
+  const { getAvatar } = useChatContext();
+
+  const avatar = getAvatar(isBot);
   return (
-    <div className={`flex  ${isSender ? "flex-row-reverse ml-auto" : ""}`}>
-      <img src={senderAvatar} alt={sender} className="rounded-full w-10 h-10" />
+    <div className={`flex  ${isBot ? "" : "flex-row-reverse ml-auto"}`}>
+      <img
+        src={avatar}
+        alt={isBot ? "Bot avatar" : "My avatar"}
+        className="rounded-full w-10 h-10"
+      />
       <div
         className={`overflow-hidden rounded-md mx-2 p-2 text-sm ${
-          isSender ? "text-white bg-blue-600" : "text-black bg-gray-200"
+          isBot ? "text-black bg-gray-200" : "text-white bg-blue-600"
         }`}
-        dangerouslySetInnerHTML={{ __html: message }}
+        dangerouslySetInnerHTML={{ __html: payload }}
       ></div>
     </div>
   );

src/components/MessageItem.tsx

@@ -1,20 +1,14 @@
 import { MessageItem } from "@/components/MessageItem";
+import { useChatContext } from "@/contexts/ChatContext";
 
-export const MessageList = ({ messages, owner }) => {
+export const MessageList = () => {
+  const { messages, isBotThinking } = useChatContext();
   return (
-    <div className="flex flex-col-reverse gap-4 overflow-y-auto w-full max-h-full rounded-md p-4">
-      {messages
-        .slice(0)
-        .reverse()
-        .map((messageItem) => (
-          <MessageItem
-            key={messageItem.id}
-            owner={owner}
-            sender={messageItem.sender}
-            senderAvatar={messageItem.senderAvatar}
-            message={messageItem.message}
-          />
-        ))}
+    <div className="flex flex-col gap-4 overflow-y-auto w-full max-h-full rounded-md p-4">
+      {messages.map((message, i) => (
+        <MessageItem key={`m${i}`} message={message} />
+      ))}
+      {isBotThinking && <div>Bot is thinking...</div>}
     </div>
   );
 };

src/components/MessageList.tsx

@@ -0,0 +1,82 @@
+import {
+  useState,
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+} from "react";
+import useWebSocket from "react-use-websocket";
+
+export type Message = {
+  isBot: boolean;
+  payload: string;
+};
+
+type UserMessage = Omit<Message, "avatar">;
+
+export type ChatContextType = {
+  messages: Message[];
+  addMessage: (msg: UserMessage) => void;
+  getAvatar: (isBot: boolean) => string;
+  isBotThinking: boolean;
+};
+
+const userAvatar = "https://i.pravatar.cc/150?img=56";
+const botAvatar = "https://i.pravatar.cc/150?img=32";
+const getAvatar = (isBot: boolean) => (isBot ? botAvatar : userAvatar);
+
+const initialContext = {
+  messages: [
+    {
+      isBot: true,
+      payload: "Hello 👋,How can I help you?",
+    },
+  ],
+  addMessage: (msg: UserMessage) => {},
+  getAvatar,
+  isBotThinking: false,
+};
+
+const ChatContext = createContext<ChatContextType>(initialContext);
+
+export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
+  const [messages, setMessages] = useState<Message[]>(initialContext.messages);
+  const [isBotThinking, setIsBotThinking] = useState<boolean>(
+    initialContext.isBotThinking
+  );
+  const {
+    sendMessage: wsSendMessage,
+    lastMessage,
+    readyState,
+  } = useWebSocket("ws://localhost:9999");
+
+  useEffect(() => {
+    if (!lastMessage) return;
+    const msg = {
+      payload: lastMessage.data,
+      isBot: true,
+    };
+    setIsBotThinking(false);
+    setMessages((messages) => [...messages, msg]);
+  }, [lastMessage]);
+
+  const addMessage = (msg: UserMessage) => {
+    setIsBotThinking(true);
+    wsSendMessage(msg.payload);
+    setMessages([...messages, msg]);
+  };
+  return (
+    <ChatContext.Provider
+      value={{
+        messages,
+        addMessage,
+        getAvatar,
+        isBotThinking,
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
+export const useChatContext = () => useContext(ChatContext);