works

README.md

@@ -7,6 +7,12 @@ app_port: 3000
 
 # web-llm-embed
 
-## [] Red Pajama
-## [] Transformers.js langchain
-## [] PWA
+Where were going we don't need servers
+
+## Credits
+
+[react-llm](https://github.com/r2d4/react-llm)
+[web-llm]()
+[transformers.js]()
+[Chat-Docs-Next]()
+[hnswlib](https://github.com/nmslib/hnswlib)

src/components/ChatWindow.jsx

@@ -1,6 +1,7 @@
 import useLLM from "@react-llm/headless";
 import Image from "next/image";
-import { SetStateAction, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import MessageList from './MessageList';
 
 import Loader from "./Loader";
 
@@ -9,9 +10,7 @@ function ChatWindow({
   maxTokens,
 }) {
   const { loadingStatus, send, isGenerating, setOnMessage } = useLLM();
-  const [userInput, setUserInput] = useState("");
-
-  
+  const [userInput, setUserInput] = useState("");  
 
   const handleChange = (event) => {
     setUserInput(event.target.value);
@@ -54,6 +53,10 @@ function ChatWindow({
       
       <div className="window-content w-full">
         <div className="flex flex-col w-full">
+          <MessageList
+            screenName={"screenName"}
+            assistantScreenName={"assistantScreenName"}
+          />
           {/* <Separator /> */}
           <div className="h-4" />
           {isReady && (

src/components/Loader.jsx

@@ -53,7 +53,6 @@ const Loader = () => {
           <button
             style={{ padding: "10px" }}
             size="lg"
-            primary
             onClick={() => init()}
           >
             Load Model

src/components/MessageList.jsx

@@ -0,0 +1,51 @@
+import useLLM from "@react-llm/headless";
+import { useEffect, useRef } from "react";
+
+function MessageList({
+  screenName = "endlessbox5",
+  assistantScreenName = "SmartestChild",
+}) {
+  const scrollRef = useRef(null);
+  const { conversation, userRoleName } = useLLM();
+  const messages = conversation?.messages || [];
+
+  const scrollToBottom = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollIntoView();
+    }
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [conversation, messages.length]);
+
+  return (
+    <div 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" }}>
+            <div
+              style={{
+                padding: "2px",
+                borderRadius: "5px",
+              }}
+            >
+              <span
+                style={{
+                  fontWeight: "bold",
+                  color: m.role === userRoleName ? "blue" : "red",
+                }}
+              >
+                {m.role === userRoleName ? screenName : assistantScreenName}
+              </span>
+              : {m.text}
+            </div>
+          </div>
+        ))}
+        <div ref={scrollRef}></div>
+      </div>
+    </div>
+  );
+}
+
+export default MessageList;