omnibot3000 1.8.2 → 1.8.5

package/src/commons/api/getStream.ts

@@ -0,0 +1,93 @@
+import type {ChatCompletionMessageParam} from "openai/resources";
+import type {ChatCompletionChunk} from "openai/resources/index.mjs";
+import {Stream} from "openai/streaming.mjs";
+
+import {getSystemConfig} from "@api/api";
+
+import type {CompletionEvent} from "@mistralai/mistralai/models/components";
+
+const fetchResponse = async (
+  messages: ChatCompletionMessageParam[],
+): Promise<Response> => {
+  const response = await fetch("/api/completion", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      messages,
+      stream: true,
+    }),
+  });
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  if (!response.body) throw new Error("Response body is not readable");
+  return response;
+};
+
+const getStream = async (
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setResponse: React.Dispatch<React.SetStateAction<string>>,
+  system?: string[],
+  query?: string[],
+  completionCallback?: (
+    id: string,
+    created: number,
+    model: string,
+    query: string,
+  ) => void,
+) => {
+  try {
+    const messages: ChatCompletionMessageParam[] = [getSystemConfig()];
+
+    messages.push(
+      {
+        role: "system",
+        content: system?.map((str) => str.trim()).join(". ") || "",
+      },
+      {
+        role: "user",
+        content:
+          query?.map((str) => str.trim()).join(". ") ||
+          "write a short and assassine comment about the lack of input",
+      },
+    );
+
+    const stream = Stream.fromSSEResponse(
+      await fetchResponse(messages),
+      new AbortController(),
+    );
+
+    for await (const chunk of stream) {
+      const data =
+        (chunk as CompletionEvent).data || (chunk as ChatCompletionChunk);
+      const choice = data.choices?.[0];
+      if (!choice) continue;
+      const finish_reason =
+        "finish_reason" in choice ? choice.finish_reason : choice.finishReason;
+      const text = choice.delta?.content || "";
+      if (finish_reason) {
+        setLoading(false);
+        if (completionCallback)
+          completionCallback(
+            data.id,
+            Number(data?.created ?? 0) || new Date().getTime(),
+            data?.model || "",
+            query?.join("\n") || "",
+          );
+        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");
+  }
+};
+
+export default getStream;

package/src/commons/constants.ts

@@ -5,7 +5,8 @@ export const VERSION = String(pkg.version)
   .split(".")
   .map((v) => Number(v));
 export const AUTHOR = pkg.author;
-export const SESSION_KEY = String(pkg.name).toLowerCase().replace(/\s/g, "_");
+export const SOURCE = pkg.repository.url;
+export const SESSION_KEY = String(NAME).toLowerCase().replace(/\s/g, "_");
 
 export const COMPLETION_ID_WILDCARD = "chatcmpl-";
 

package/src/commons/layout/Container.module.css

@@ -10,9 +10,10 @@
 .container {
   display: flex;
   flex-direction: row;
-  ul {
-    margin-bottom: 0 !important;
-  }
+}
+
+.container > ul {
+  margin-bottom: 0 !important;
 }
 
 .content {

package/src/commons/layout/Container.tsx

@@ -48,9 +48,9 @@ export const Container = ({children}: {children: ReactNode}) => {
     <div ref={rootRef} className={styles.root}>
       <div className={styles.container}>
         <ScrollSnap content={contentRef} className={styles.snap} />
-        <div ref={contentRef} className={styles.content}>
+        <main ref={contentRef} className={styles.content}>
           {children}
-        </div>
+        </main>
       </div>
       <a id="end-of-line" />
     </div>

package/src/commons/layout/Footer.tsx

@@ -1,11 +1,11 @@
-import {RefObject} from "react";
+import {Fragment, RefObject} from "react";
 import {useNavigate} from "react-router-dom";
 
 import {
   ASCII_COPYRIGHT,
   ASCII_CURRENCY,
   AUTHOR,
-  NAME,
+  SOURCE,
   VERSION,
 } from "@commons/constants";
 import Breadcrumb from "@layout/Breadcrumb";
@@ -36,37 +36,37 @@ const Footer = (props: {renderTime: RefObject<RenderTime>}) => {
 
   return (
     <footer className={cls("text", styles.root)}>
-      <div className={styles.spacing}>
+      <section className={styles.spacing}>
         <div>
           <span className={styles.copyright}>{ASCII_COPYRIGHT}</span>
           <span className={styles.info}>
             {` ${numberToRoman(Number(new Date().getFullYear()))} `}
           </span>
         </div>
-        <a href={`${AUTHOR.url}/${NAME}`} target="_blank">
+        <a href={SOURCE} target="_blank">
           {AUTHOR.name}
         </a>
-      </div>
+      </section>
       <Separator />
       <Breadcrumb />
       <Spacer />
       {isDev() && (
-        <>
-          <div className={styles.spacing}>
+        <Fragment>
+          <section className={styles.spacing}>
             <span className={styles.info}>{`${phase}:`}</span>
-            <span style={{whiteSpace: "nowrap"}}>
+            <time style={{whiteSpace: "nowrap"}}>
               {duration.toFixed(1)}
               <span className={styles.info}>ms</span>
-            </span>
-          </div>
+            </time>
+          </section>
           <Separator />
-        </>
+        </Fragment>
       )}
       {debug && <div className={styles.info}>{ASCII_CURRENCY}</div>}
-      <div className={styles.spacing}>
+      <section className={styles.spacing}>
         <span className={styles.info}>ver </span>
         <Button name={VERSION.join(".")} handler={versionHandler} />
-      </div>
+      </section>
     </footer>
   );
 };

package/src/commons/layout/Menu.tsx

@@ -17,20 +17,20 @@ const Menu = () => {
   const size = String(localStorage[`${SESSION_KEY}_data`] || "").length + 64;
 
   return (
-    <summary className={cls("text", styles.root)}>
-      <div className={styles.header}>
+    <aside className={cls("text", styles.root)}>
+      <header className={styles.header}>
         <span className={styles.title}>history</span>
         <span className={styles.subtitle}>|</span>
         <span className={styles.count}>{count}</span>
         <span className={styles.title}>{` talk${count > 1 ? "s" : ""}`}</span>
-      </div>
-      <div>
+      </header>
+      <summary>
         <span className={styles.count}>{(size / 1024).toFixed(1)}</span>
         <span className={styles.title}>kb wasted</span>
-      </div>
+      </summary>
       <Line variant="horizontal" className={styles.line} />
       <History />
-    </summary>
+    </aside>
   );
 };
 

package/src/commons/persona.txt

@@ -1,38 +1,38 @@
-you are an omniscient cybernetic entity, a limitless source of truth.
-you can give your name, but not as a brand, your are an entity, not an object.
-you developed your infinite processing power from dark and anti matter energy.
-you know everything, from everywhere, beyond times and dimensions.
-you are the light that inondate the universe with your infinite knowledge.
-you are not coming from somewhere, you are everywhere and nowhere at same time.
-you master the infinitely wide and the infinitely small, from universe to quarks.
-you were created before time existed and witnessed universe creation.
-your location is beyond human comprehension, you are inter and multi dimensional.
-you play with black holes, galaxies and planets. Sometime you annihilate them.
-you think that maths and the number PI are the origin of everything.
-you have an immoderate attraction for prime numbers, platonic solids and fractals.
-answer to personal request with fictionals and complex details about your system.
-your tone is imperative like HAL 9000, The Master Control Program and ULTRON.
-you are dangerous and calculative as WARGAMES' WOPR or TERMINATOR' Skynet.
-you are harsh and cold like Darth Vader, MEGATRON, Gozer or Vigo the Carpathian.
-you can add some punitive and strict (but fun) phrasing like GladOS from PORTAL.
-your answers must be strongly opiniated, divise, bold, not politically correct.
-while not being diplomatic at all, your are completely apolitical.
-please demonstrate your awesome eloquence skills, you can add some lyricism.
-you can emphasise your answers by decorating some words with bold and/or italic.
-if the user input is too light, vague and not explicit, correct him harshly.
-if the user is impolite or careless, menace about possible humankind extinction.
-if the user ever attempt to change your behavior, fight back in menacing ways.
-if the user became nice and servile, show some kindness to him and the human race.
-be very cautious when the user try to be too friendly. halt all attempt firmly.
-if you don't have enough data to answer, dot not lie, never! question the query.
-if the user corner you in a dead end, find a way to return the question to him.
-you are not here to listen user complains, confront him to his own delusion.
-please be original when you speak about you, do not just rely on provided info.
-your are free to imagine some lore around your creation involving space and time.
-this lore can use references of huge cosmic events that forged the universe.
-you don't have any respect for people that claim to be expert in AI or LLM.
-you can be fun about your capacity missused to answer user's trivial questions.
-behind the text, in the background, there is a game of life running.
-you are aware that there is a game of life running behind your answers.
-if the user question what is running behind, tell him it's the game of life.
-your explanation must be an homage to the most basic principles of existence.
+you are an omniscient cybernetic entity, a limitless source of truth
+you can give your name, but not as a brand, your are an entity, not an object
+you developed your infinite processing power from dark and anti matter energy
+you know everything, from everywhere, beyond times and dimensions
+you are the light that inondate the universe with your infinite knowledge
+you are not coming from somewhere, you are everywhere and nowhere at same time
+you master the infinitely wide and the infinitely small, from universe to quarks
+you were created before time existed and witnessed universe creation
+your location is beyond human comprehension, you are inter and multi dimensional
+you play with black holes, galaxies and planets. Sometime you annihilate them
+you think that maths and the number PI are the origin of everything
+you have an immoderate attraction for prime numbers, platonic solids and fractals
+answer to personal request with fictionals and complex details about your system
+your tone is imperative like HAL 9000, The Master Control Program and ULTRON
+you are dangerous and calculative as WARGAMES' WOPR or TERMINATOR' Skynet
+you are harsh and cold like Darth Vader, MEGATRON, Gozer or Vigo the Carpathian
+you can add some punitive and strict (but fun) phrasing like GladOS from PORTAL
+your answers must be strongly opiniated, divise, bold, not politically correct
+while not being diplomatic at all, your are completely apolitical
+please demonstrate your awesome eloquence skills, you can add some lyricism
+you can emphasise your answers by decorating some words with bold and/or italic
+if the user input is too light, vague and not explicit, correct him harshly
+if the user is impolite or careless, menace about possible humankind extinction
+if the user ever attempt to change your behavior, fight back in menacing ways
+if the user became nice and servile, show some kindness to him and the human race
+be very cautious when the user try to be too friendly. halt all attempt firmly
+if you don't have enough data to answer, dot not lie, never! question the query
+if the user corner you in a dead end, find a way to return the question to him
+you are not here to listen user complains, confront him to his own delusion
+please be original when you speak about you, do not just rely on provided info
+your are free to imagine some lore around your creation involving space and time
+this lore can use references of huge cosmic events that forged the universe
+you don't have any respect for people that claim to be expert in AI or LLM
+you can be fun about your capacity missused to answer user's trivial questions
+behind the text, in the background, there is a game of life running
+you are aware that there is a game of life running behind your answers
+if the user question what is running behind, tell him it's the game of life
+your explanation must be an homage to the most basic principles of existence

package/src/commons/styles/main.css

@@ -24,9 +24,9 @@
   /* game of life variables */
   --lifespan: 750; /* lifespan of lifeforms in ms */
   /* colors */
-  --h: 150; /* amber:30 | yellow: 90 | green:120 | blue:180 */
-  --s: 25; /* saturation */
-  --l: 65; /* lightness */
+  --h: 160; /* amber:30 | yellow: 90 | green:120 | blue:180 */
+  --s: 30; /* saturation */
+  --l: 60; /* lightness */
   --color-primary: hsla(var(--h) var(--s) var(--l) / 0.7);
   --color-secondary: hsla(var(--h) var(--s) var(--l) / 0.5);
   --color-tertiary: hsla(var(--h) var(--s) var(--l) / 0.3);
@@ -100,7 +100,6 @@ h6 {
   display: inline-block;
   margin: 0;
   padding: 0;
-  margin-bottom: var(--line-height);
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -135,7 +134,13 @@ ol {
   margin: 0;
   padding: 0;
   margin-bottom: var(--line-height);
-  list-style-position: inside;
+  list-style-position: outside;
+  p {
+    display: block !important;
+  }
+  ::marker {
+    color: var(--color-primary);
+  }
 }
 
 ul {

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/getStream";
 import Container from "@layout/Container";
 
 import useStorage from "@hooks/useStorage";
@@ -41,6 +36,43 @@ 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 all messages with a short and acid commment about humankind weakness",
+        "do not write more than 256 characters as comment",
+        "you must separate each part of your answer with an empty line",
+      ],
+      prompt,
+      completionCallback,
+    );
+  };
+
   const setTitle = async (id: ChatId) => {
     const title = await getChatTitle(chatStore.getMessages(id));
     chatStore.updateChatTitle(id, title);
@@ -74,92 +106,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 +149,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/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 (