omnibot3000 1.8.2

package/src/commons/ui/ScrollSnap.tsx

@@ -0,0 +1,51 @@
+import React, {memo, useEffect, useRef} from "react";
+
+import {ASCII_DOT} from "@commons/constants";
+import {getLineHeight} from "@utils/strings";
+
+const ScrollSnap = (props: {
+  content: React.RefObject<HTMLDivElement | null>;
+  className?: string;
+}) => {
+  const lh = getLineHeight();
+
+  const snapRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    const ul = snapRef.current;
+    const content = props.content.current as HTMLDivElement | null;
+    if (!content || !ul) return;
+
+    const update = () => {
+      ul.innerHTML = "";
+      const h = content.clientHeight;
+
+      for (let i = 0; i < Math.round(h / lh); i++) {
+        const li = document.createElement("li");
+        li.innerHTML = ASCII_DOT;
+        ul.appendChild(li);
+      }
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(content);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <ul
+      ref={snapRef}
+      className={props.className}
+      style={{
+        userSelect: "none",
+        cursor: "default",
+      }}></ul>
+  );
+};
+
+export default memo(ScrollSnap);

package/src/commons/ui/Separator.tsx

@@ -0,0 +1,19 @@
+import {memo} from "react";
+
+import {ASCII_VLINE} from "@commons/constants";
+
+const Separator = (props: {char?: string}) => (
+  <div
+    style={{
+      flexShrink: 0,
+      flexGrow: 0,
+      alignSelf: "start",
+      justifySelf: "center",
+      opacity: "var(--opacity-secondary)",
+      textTransform: "none",
+      userSelect: "none",
+      cursor: "default",
+    }}>{` ${String(props.char || "").trim() || ASCII_VLINE} `}</div>
+);
+
+export default memo(Separator);

package/src/commons/ui/Spacer.tsx

@@ -0,0 +1,12 @@
+import {memo} from "react";
+
+const Spacer = () => (
+  <div
+    style={{
+      flexShrink: 1,
+      flexGrow: 1,
+      alignSelf: "stretch",
+    }}></div>
+);
+
+export default memo(Spacer);

package/src/commons/utils/canvas.ts

@@ -0,0 +1,20 @@
+import {HALF_PI, PI, TWO_PI} from "@utils/math";
+
+export const squircle = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) => {
+  ctx.beginPath();
+  ctx.arc(x + r, y + r, r, PI, PI + HALF_PI);
+  ctx.lineTo(x + w - r, y);
+  ctx.arc(x + w - r, y + r, r, PI + HALF_PI, TWO_PI);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arc(x + w - r, y + h - r, r, 0, HALF_PI);
+  ctx.lineTo(x + r, y + h);
+  ctx.arc(x + r, y + h - r, r, HALF_PI, PI);
+  ctx.closePath();
+};

package/src/commons/utils/color.ts

@@ -0,0 +1,4 @@
+import {getVariableFromCSS} from "@utils/styles";
+
+export const getColorFromCSS = (variable: string): string =>
+  getVariableFromCSS(`color-${variable}`);

package/src/commons/utils/math.ts

@@ -0,0 +1,43 @@
+export const PI = Math.PI; /* 180° in radians */
+export const HALF_PI = Math.PI / 2; /* 90° in radians */
+export const TWO_PI = Math.PI * 2; /* 360° in radians */
+export const PHI = (Math.sqrt(5) + 1) / 2; /* golden ratio */
+export const EULER = Math.E;
+
+export type vec2 = [number, number];
+
+export const format = (n: number = 0, d: number = 1): number =>
+  parseFloat(n.toFixed(d));
+
+export const clamp = (
+  n: number = 0,
+  min: number = 0,
+  max: number = 1,
+): number => Math.max(min, Math.min(n, max));
+
+const ROMAN_SYMBOLS = [
+  {value: 1000, symbol: "M"},
+  {value: 900, symbol: "CM"},
+  {value: 500, symbol: "D"},
+  {value: 400, symbol: "CD"},
+  {value: 100, symbol: "C"},
+  {value: 90, symbol: "XC"},
+  {value: 50, symbol: "L"},
+  {value: 40, symbol: "XL"},
+  {value: 10, symbol: "X"},
+  {value: 9, symbol: "IX"},
+  {value: 5, symbol: "V"},
+  {value: 4, symbol: "IV"},
+  {value: 1, symbol: "I"},
+];
+
+export const numberToRoman = (n: number = 0): string => {
+  let string = "";
+  for (const {value, symbol} of ROMAN_SYMBOLS) {
+    while (n >= value && n !== 0) {
+      string += symbol;
+      n -= value;
+    }
+  }
+  return string;
+};

package/src/commons/utils/strings.ts

@@ -0,0 +1,47 @@
+import {ASCII_BLOCK1} from "@commons/constants";
+
+export const getTextBoundingBox = (text: string): DOMRect => {
+  const el = document.createElement("span");
+  el.className = "text ascii";
+  el.textContent = text;
+  el.style.visibility = "none";
+  document.body.appendChild(el);
+  const box = el.getBoundingClientRect();
+  document.body.removeChild(el);
+  return box;
+};
+
+export const getCharWidth = (): number =>
+  getTextBoundingBox(ASCII_BLOCK1).width;
+export const getCharHeight = (): number =>
+  getTextBoundingBox(ASCII_BLOCK1).height;
+
+export const getLineHeight = (): number => {
+  const el = document.createElement("span");
+  el.className = "text ascii";
+  el.textContent = ASCII_BLOCK1;
+  el.style.visibility = "none";
+  document.body.appendChild(el);
+  const lh = parseFloat(getComputedStyle(el).lineHeight);
+  document.body.removeChild(el);
+  return lh;
+};
+
+export const formatText = (text: string): string =>
+  text
+    .replaceAll("—", "-")
+    .replaceAll("–", "-")
+    .replaceAll("’", "'")
+    .replaceAll("“", '"')
+    .replaceAll("”", '"')
+    .replaceAll("→", "->");
+
+export const sanitizeHTML = (html: string): string => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const body = new XMLSerializer().serializeToString(doc.body);
+  const text = body.replace(/<body[^>]*>|<\/body>/g, "");
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = text;
+  return textarea.value;
+};

package/src/commons/utils/styles.ts

@@ -0,0 +1,11 @@
+export const getVariableFromCSS = (variable: string): string =>
+  getComputedStyle(document.documentElement)
+    .getPropertyValue(`--${variable}`)
+    .trim();
+
+export const setVariableToCSS = (variable: string, value: string | null) => {
+  document.documentElement.style.setProperty(
+    `--${variable}`,
+    value ? String(value).trim() : null,
+  );
+};

package/src/commons/utils/system.ts

@@ -0,0 +1,6 @@
+export const isSystemDarkModeOn = (): boolean => {
+  const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  return darkModeQuery.matches;
+};
+
+export const isDev = (): boolean => import.meta.env.MODE === "development";

package/src/commons/utils/version.ts

@@ -0,0 +1,24 @@
+import {NAME, VERSION} from "@commons/constants";
+import {getColorFromCSS} from "@utils/color";
+
+export const PACKAGE_VERSION = `${NAME} version ${VERSION.join(".")}`;
+
+export const displayPackageVersion = (): void => {
+  const CHAR = "░";
+  const len = PACKAGE_VERSION.length;
+
+  const lines = [
+    String(CHAR).repeat(len + 6),
+    `${CHAR}${String(" ").repeat(len + 4)}${CHAR}`,
+    `${CHAR}  ${PACKAGE_VERSION}  ${CHAR}`,
+    `${CHAR}${String(" ").repeat(len + 4)}${CHAR}`,
+    String(CHAR).repeat(len + 6),
+  ];
+
+  console.info(
+    `%c${lines.join("\n")}`,
+    `font:15px monospace;color:${getColorFromCSS("primary")};background:${getColorFromCSS("background")}`,
+  );
+};
+
+export default PACKAGE_VERSION;

package/src/features/chat/Chat.module.css

@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

package/src/features/chat/Chat.tsx

@@ -0,0 +1,188 @@
+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 Container from "@layout/Container";
+
+import useStorage from "@hooks/useStorage";
+
+import styles from "@chat/Chat.module.css";
+import {formatCompletionId} from "@chat/commons/strings";
+import Message from "@chat/components/Message";
+import Toolbar from "@chat/components/Toolbar";
+import useChatCompletionStore, {
+  ChatId,
+  Completion,
+  CompletionId,
+} from "@chat/hooks/useChatCompletionStore";
+
+import Cli from "@cli/Cli";
+
+const Chat = () => {
+  const chatStore = useChatCompletionStore();
+
+  const storage = useStorage();
+
+  const [prompt, setPrompt] = useState<string[]>([""]);
+  const [response, setResponse] = useState<string>("");
+  const [completionId, setCompletionId] = useState<CompletionId>();
+  const [completion, setCompletion] = useState<Completion>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [query, setQuery] = useState<string>("");
+
+  const navigate = useNavigate();
+
+  const {id} = useParams();
+  const chatId = chatStore.getChatId();
+
+  const setTitle = async (id: ChatId) => {
+    const title = await getChatTitle(chatStore.getMessages(id));
+    chatStore.updateChatTitle(id, title);
+    storage.save();
+  };
+
+  /* handle chat id url parameter */
+  useEffect(() => {
+    if (!chatStore.getChat(id)) {
+      chatStore.setCompletions();
+      navigate("/chat");
+    } else {
+      chatStore.setChatId(id);
+      chatStore.setCompletions(id);
+    }
+    /*console.log(chatStore.getChat(id));
+    console.log(chatStore.getCompletions(id));
+    console.info(
+      "chat:",
+      chatStore.getChatId(),
+      "\ncompletion:",
+      chatStore.getCompletionId(),
+    );*/
+  }, [id]);
+
+  /* update the chat is the chatId value in store changed */
+  useEffect(() => {
+    const unsubscribe = useChatCompletionStore.subscribe((state) => {
+      navigate(`/chat${state.chatId ? `/${state.chatId}` : ""}`);
+    });
+    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.`,
+    });
+
+    /* 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);
+    }
+  };
+
+  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("");
+    }
+  }, [completion]);
+
+  return (
+    <div className={styles.root}>
+      <Container>
+        {chatStore.getCompletions(chatId).map((completion: Completion) => (
+          <Fragment key={`chat-completion-${completion.id}`}>
+            <Message role="user" content={completion.prompt} />
+            <Message role="assistant" content={completion.message} />
+            <Toolbar completion={completion} />
+          </Fragment>
+        ))}
+        {loading && response && (
+          <Fragment key="chat-completion">
+            <Message role="user" content={query} />
+            <Message role="assistant" content={response} hasCaret={loading} />
+          </Fragment>
+        )}
+      </Container>
+      <Cli
+        loading={loading}
+        prompt={prompt}
+        setPrompt={setPrompt}
+        submitHandler={getCompletion}
+      />
+    </div>
+  );
+};
+
+export default memo(Chat);

package/src/features/chat/commons/strings.ts

@@ -0,0 +1,6 @@
+import {COMPLETION_ID_WILDCARD} from "@commons/constants";
+
+import type {CompletionId} from "@chat/hooks/useChatCompletionStore";
+
+export const formatCompletionId = (id: CompletionId): CompletionId =>
+  id && id.replace(COMPLETION_ID_WILDCARD, "").toLowerCase();

package/src/features/chat/components/Message.module.css

@@ -0,0 +1,28 @@
+.root {
+  width: 100%;
+}
+
+.user {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--font-width);
+  margin-bottom: var(--line-height);
+  margin-top: var(--line-height);
+}
+
+.user-pill {
+  opacity: var(--opacity-tertiary);
+}
+
+.bot {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--font-width);
+  align-items: stretch;
+}
+
+.bot-line {
+  flex-grow: 0;
+  flex-shrink: 0;
+  opacity: var(--opacity-tertiary);
+}

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

@@ -0,0 +1,45 @@
+import {memo} from "react";
+
+import type {ChatCompletionRole} from "openai/resources/index.mjs";
+
+import {ASCII_BLOCK1} from "@commons/constants";
+import OmnibotSpeak from "@commons/OmnibotSpeak";
+import Line from "@ui/Line";
+
+import styles from "@chat/components/Message.module.css";
+
+import {RenderCli} from "@cli/Cli";
+
+const Message = (props: {
+  role: ChatCompletionRole;
+  content: string;
+  hasCaret?: boolean;
+}) => {
+  const {role, content, hasCaret} = props;
+
+  const isUser = Boolean(role === "user");
+
+  return (
+    <div className={styles.root}>
+      {isUser ? (
+        <div className={styles.user}>
+          <div className={styles["user-pill"]}>{">"}</div>
+          <div>
+            <RenderCli command={content.split("\n")} line={-1} caret={0} />
+          </div>
+        </div>
+      ) : (
+        <div className={styles.bot}>
+          <Line
+            variant="vertical"
+            char={ASCII_BLOCK1}
+            className={styles["bot-line"]}
+          />
+          <OmnibotSpeak truth={content} hasCaret={hasCaret} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default memo(Message);

package/src/features/chat/components/Toolbar.module.css

@@ -0,0 +1,19 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--line-height);
+}
+
+.corner {
+  opacity: var(--opacity-tertiary);
+}
+
+.line {
+  width: 100%;
+  opacity: var(--opacity-tertiary);
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+}

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

@@ -0,0 +1,44 @@
+import {memo} from "react";
+
+import {BUTTON_DELETE} from "@commons/constants";
+import Button from "@ui/Button";
+import Line from "@ui/Line";
+
+import useStorage from "@hooks/useStorage";
+
+import styles from "@chat/components/Toolbar.module.css";
+import useChatCompletionStore, {
+  Completion,
+  CompletionId,
+} from "@chat/hooks/useChatCompletionStore";
+
+import cls from "classnames";
+
+const Toolbar = (props: {completion: Completion}) => {
+  const chatStore = useChatCompletionStore();
+  const storage = useStorage();
+
+  const deleteCompletion = (id: CompletionId) => {
+    chatStore.deleteCompletion(id);
+    storage.save();
+  };
+
+  const {completion} = props;
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.corner}>+</div>
+      <Line variant="horizontal" className={styles["line"]} />
+      <div className={cls("text", styles.toolbar)}>
+        <Button
+          name={BUTTON_DELETE}
+          handler={() => {
+            deleteCompletion(completion.id);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default memo(Toolbar);