omnibot3000 1.8.2 → 1.8.6

package/src/features/chat/Chat.tsx

@@ -1,13 +1,8 @@
 import {Fragment, memo, useEffect, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
 
-import {
-  ChatCompletionChunk,
-  ChatCompletionMessageParam,
-} from "openai/resources/index.mjs";
-import {Stream} from "openai/streaming.mjs";
-
-import getData, {getChatTitle, getSystemConfig} from "@api/api";
+import {getChatTitle} from "@api/api";
+import getStream from "@api/utils/getStream";
 import Container from "@layout/Container";
 
 import useStorage from "@hooks/useStorage";
@@ -41,6 +36,44 @@ const Chat = () => {
   const {id} = useParams();
   const chatId = chatStore.getChatId();
 
+  const completionCallback = (
+    id: string,
+    created: number,
+    model: string,
+    query: string,
+  ) => {
+    setCompletion({
+      id: formatCompletionId(id),
+      created: created,
+      model: model,
+      prompt: query,
+      message: "",
+      index: 0,
+      children: [],
+      parentCompletion: completionId,
+    });
+    setCompletionId(id);
+  };
+
+  const submitHandler = (input: string) => {
+    setLoading(true);
+    setQuery(input);
+    getStream(
+      setLoading,
+      setResponse,
+      [
+        "keep your message short and concise, do not repeat yourself",
+        "do not present yourself again, focus on answering the user prompt",
+        "end your answer with an acid but funny haiku about humankind",
+        "this comment length must be less than 256 characters long",
+        "you must separate each part with a line or empty line",
+      ],
+      prompt,
+      chatStore.getMessages(id),
+      completionCallback,
+    );
+  };
+
   const setTitle = async (id: ChatId) => {
     const title = await getChatTitle(chatStore.getMessages(id));
     chatStore.updateChatTitle(id, title);
@@ -74,92 +107,30 @@ const Chat = () => {
     return () => unsubscribe();
   }, []);
 
-  const getCompletion = async (query: string) => {
-    setQuery(query); /* save the query before reset */
-
-    if (String(query).replace("\n", "").trim() === "") return;
-
-    setLoading(true);
-
-    const messages: ChatCompletionMessageParam[] = [getSystemConfig()];
-
-    messages.push({
-      role: "developer",
-      content: `\
-end all messages with a short, acid and fun commment about humankind weakness. \
-keep your message short, do not write more than 256 characters as comment. \
-you must separate each part of your answer with an empty line.`,
+  useEffect(() => {
+    if (!completion) return;
+    setCompletion((prev) => {
+      if (!prev) return;
+      prev.message = response;
+      return prev;
     });
-
-    /* add chat history to the messages array to give context */
-    if (chatId) {
-      messages.push(...chatStore.getMessages(chatId));
-    }
-
-    /* append current query */
-    messages.push({role: "user", content: query});
-
-    const stream = (await getData(messages)) as Stream<ChatCompletionChunk>;
-
-    try {
-      for await (const chunk of stream) {
-        const choice = chunk.choices?.[0] || {};
-        const finish_reason = choice.finish_reason;
-        const text = choice.delta?.content || "";
-
-        if (finish_reason) {
-          setLoading(false);
-          if (finish_reason === "length") {
-            setResponse((prev) => `${prev}\n\n[max tokens length reached]\n`);
-          }
-          setCompletion({
-            id: formatCompletionId(chunk.id),
-            created: chunk.created,
-            model: chunk.model,
-            prompt: query,
-            message: "",
-            index: 0,
-            children: [],
-            parentCompletion: completionId,
-          });
-          setCompletionId(chunk.id);
-        }
-
-        if (text) {
-          setResponse((prev) => `${prev}${text}`);
-        }
-      }
-    } catch (error) {
-      console.error("Error reading stream:", error);
-      setLoading(false);
+    if (!chatId) {
+      chatStore.setCompletions();
+      chatStore.createChat(completion);
+      setTitle(chatStore.getChatId());
     }
-  };
-
-  useEffect(() => {
-    if (completion) {
-      setCompletion((prev) => {
-        if (!prev) return;
-        prev.message = response;
-        return prev;
-      });
-      if (!chatId) {
-        chatStore.setCompletions();
-        chatStore.createChat(completion);
-        setTitle(chatStore.getChatId());
-      }
-      chatStore.addCompletion(completion);
-      if (chatId) {
-        chatStore.updateCompletions(chatId);
-        setTitle(chatId);
-      }
-      /* reset values once the completion is saved in the store */
-      setCompletion(undefined);
-      setResponse("");
+    chatStore.addCompletion(completion);
+    if (chatId) {
+      chatStore.updateCompletions(chatId);
+      setTitle(chatId);
     }
+    /* reset values once the completion is saved in the store */
+    setCompletion(undefined);
+    setResponse("");
   }, [completion]);
 
   return (
-    <div className={styles.root}>
+    <section className={styles.root}>
       <Container>
         {chatStore.getCompletions(chatId).map((completion: Completion) => (
           <Fragment key={`chat-completion-${completion.id}`}>
@@ -179,9 +150,9 @@ you must separate each part of your answer with an empty line.`,
         loading={loading}
         prompt={prompt}
         setPrompt={setPrompt}
-        submitHandler={getCompletion}
+        submitHandler={submitHandler}
       />
-    </div>
+    </section>
   );
 };
 

package/src/features/chat/components/Message.tsx

@@ -20,13 +20,13 @@ const Message = (props: {
   const isUser = Boolean(role === "user");
 
   return (
-    <div className={styles.root}>
+    <article className={styles.root}>
       {isUser ? (
         <div className={styles.user}>
           <div className={styles["user-pill"]}>{">"}</div>
-          <div>
+          <h1>
             <RenderCli command={content.split("\n")} line={-1} caret={0} />
-          </div>
+          </h1>
         </div>
       ) : (
         <div className={styles.bot}>
@@ -38,7 +38,7 @@ const Message = (props: {
           <OmnibotSpeak truth={content} hasCaret={hasCaret} />
         </div>
       )}
-    </div>
+    </article>
   );
 };
 

package/src/features/chat/components/Toolbar.tsx

@@ -26,7 +26,7 @@ const Toolbar = (props: {completion: Completion}) => {
   const {completion} = props;
 
   return (
-    <div className={styles.root}>
+    <footer className={styles.root}>
       <div className={styles.corner}>+</div>
       <Line variant="horizontal" className={styles["line"]} />
       <div className={cls("text", styles.toolbar)}>
@@ -37,7 +37,7 @@ const Toolbar = (props: {completion: Completion}) => {
           }}
         />
       </div>
-    </div>
+    </footer>
   );
 };
 

package/src/features/cli/Cli.module.css

@@ -36,7 +36,6 @@
   cursor: text !important;
   text-wrap: wrap;
   white-space: pre-wrap;
-  word-break: break-all;
 }
 
 .placeholder {

package/src/features/help/Help.tsx

@@ -1,10 +1,6 @@
 import {memo, useEffect, useRef, useState} from "react";
 
-import {ChatCompletionMessageParam} from "openai/resources";
-import {ChatCompletionChunk} from "openai/resources/index.mjs";
-import {Stream} from "openai/streaming.mjs";
-
-import getData, {getSystemConfig} from "@api/api";
+import getStream from "@api/utils/getStream";
 import OmnibotSpeak from "@commons/OmnibotSpeak";
 import Container from "@layout/Container";
 
@@ -20,48 +16,25 @@ const Help = () => {
   const [response, setResponse] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
 
-  const getResponse = async () => {
-    try {
-      const messages: ChatCompletionMessageParam[] = [getSystemConfig()];
-
-      messages.push({
-        role: "developer",
-        content: `\
-make a list of all available config commands. \
-add a description of each command to help the user. \
-you can give a single example for commands that need parameter. \
-highlight the command in bold and keep all comments short.`,
-      });
-
-      const response = (await getData(messages)) as Stream<ChatCompletionChunk>;
-
-      for await (const chunk of response) {
-        const choice = chunk.choices?.[0] || {};
-        const finish_reason = choice.finish_reason;
-        const text = choice.delta?.content || "";
-        if (finish_reason) {
-          setLoading(false);
-          if (finish_reason === "length")
-            setResponse((prev) => `${prev}\n\n[max tokens length reached]\n`);
-          break;
-        }
-        if (!text) continue;
-        setResponse((prev) => `${prev}${text}`);
-      }
-    } catch (error) {
-      console.error("Error reading stream:", error);
-      setLoading(false);
-      setResponse("no signal");
-    }
-  };
-
   useEffect(() => {
     if (hasRunOnce.current) return;
     hasRunOnce.current = true;
 
     chatStore.resetChat();
     setLoading(true);
-    getResponse();
+    getStream(
+      setLoading,
+      setResponse,
+      [
+        "you can give a single example for commands that need parameter",
+        "highlight the command in bold and keep all comments shorts",
+      ],
+      [
+        "make a list of all available config commands",
+        "add a description of each command to help the user",
+        "do not include commands that are not provided",
+      ],
+    );
   }, []);
 
   return (

package/src/features/home/Home.tsx

@@ -1,11 +1,8 @@
 import {memo, useEffect, useRef, useState} from "react";
 import {useNavigate} from "react-router-dom";
 
-import {ChatCompletionMessageParam} from "openai/resources";
-import {ChatCompletionChunk} from "openai/resources/index.mjs";
-import {Stream} from "openai/streaming.mjs";
-
-import getData, {getStartButton, getSystemConfig} from "@api/api";
+import {getStartButton} from "@api/api";
+import getStream from "@api/utils/getStream";
 import OmnibotSpeak from "@commons/OmnibotSpeak";
 import Container from "@layout/Container";
 import Button from "@ui/Button";
@@ -31,40 +28,6 @@ const Home = () => {
     setStartButton(formatText(data));
   };
 
-  const getResponse = async () => {
-    try {
-      const messages: ChatCompletionMessageParam[] = [getSystemConfig()];
-
-      messages.push({
-        role: "developer",
-        content: `\
-write an intro message for the user. keep it short and to the point. \
-explain who are you, why you are here and how you can help the user. \
-separate each element with an empty line.`,
-      });
-
-      const response = (await getData(messages)) as Stream<ChatCompletionChunk>;
-
-      for await (const chunk of response) {
-        const choice = chunk.choices?.[0] || {};
-        const finish_reason = choice.finish_reason;
-        const text = choice.delta?.content || "";
-        if (finish_reason) {
-          setLoading(false);
-          if (finish_reason === "length")
-            setResponse((prev) => `${prev}\n\n[max tokens length reached]\n`);
-          break;
-        }
-        if (!text) continue;
-        setResponse((prev) => `${prev}${text}`);
-      }
-    } catch (error) {
-      console.error("Error reading stream:", error);
-      setLoading(false);
-      setResponse("no signal");
-    }
-  };
-
   const newChat = () => {
     chatStore.setChatId();
     chatStore.setCompletionId();
@@ -78,7 +41,21 @@ separate each element with an empty line.`,
 
     chatStore.resetChat();
     setLoading(true);
-    getResponse();
+    getStream(
+      setLoading,
+      setResponse,
+      [
+        "keep it short and straight to the point",
+        "do not repeat yourself",
+        "do not exceed 512 characters",
+        "separate each element with an empty line",
+      ],
+      [
+        "write an intro message for the user",
+        "explain who are you, why you are here and what you can do",
+        "it's not a help or documentation page",
+      ],
+    );
     updateStartButton();
   }, []);
 

package/src/features/version/Version.tsx

@@ -10,8 +10,6 @@ import styles from "@help/Help.module.css";
 
 import cls from "classnames";
 
-console.info(JSON.stringify(import.meta.env, null, 2));
-
 const API_PORT = Number(import.meta.env.API_PORT) || 3001;
 const API_PATH = import.meta.env.API_PATH || "/api";
 
@@ -27,7 +25,7 @@ const Version = () => {
   const chatStore = useChatCompletionStore();
 
   const hasRunOnce = useRef(false);
-  const [response, setResponse] = useState<string>("loading...");
+  const [response, setResponse] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
 
   const getResponse = async () => {
@@ -54,6 +52,10 @@ const Version = () => {
     setLoading(true);
     getResponse();
     displayPackageVersion();
+    console.info(
+      `%c${JSON.stringify(import.meta.env, null, 2)}`,
+      "color: #999",
+    );
   }, []);
 
   return (