omnibot3000 1.8.2

package/src/App.tsx

@@ -0,0 +1,193 @@
+import type {ProfilerOnRenderCallback} from "react";
+import {Profiler, useEffect, useLayoutEffect, useRef, useState} from "react";
+import {
+  BrowserRouter as Router,
+  Navigate,
+  Outlet,
+  Route,
+  Routes,
+} from "react-router-dom";
+
+import Background from "@layout/Background";
+import Footer from "@layout/Footer";
+import Header from "@layout/Header";
+import Menu from "@layout/Menu";
+import Line from "@ui/Line";
+import {format} from "@utils/math";
+import {getCharWidth, getLineHeight} from "@utils/strings";
+import {isSystemDarkModeOn} from "@utils/system";
+
+import useConfig from "@hooks/useConfig";
+import useStorage from "@hooks/useStorage";
+
+import Chat from "@chat/Chat";
+import Help from "@help/Help";
+import Home from "@home/Home";
+
+import styles from "@/App.module.css";
+
+import "@styles/debug.css";
+import "@styles/main.css";
+import "@styles/vt220.css";
+
+import Life from "@life/Life";
+import Version from "@version/Version";
+import cls from "classnames";
+
+export interface RenderTime {
+  phase: string;
+  duration: number;
+  base: number;
+}
+
+const Layout = () => {
+  const config = useConfig();
+  const storage = useStorage();
+
+  const {debug} = config.getConfig();
+
+  const beforeUnloadHandler = () => {
+    storage.save();
+  };
+
+  useEffect(() => {
+    storage.load();
+
+    window.addEventListener("beforeunload", beforeUnloadHandler);
+
+    return () => {
+      window.removeEventListener("beforeunload", beforeUnloadHandler);
+    };
+  }, []);
+
+  const [darkMode, toggleDarkMode] = useState(isSystemDarkModeOn());
+
+  const themeSwitchHandler = () => {
+    toggleDarkMode(!darkMode);
+  };
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+
+  const [cw, setCharWidth] = useState<number>(getCharWidth());
+  const [lh, setLineHeight] = useState<number>(getLineHeight());
+  const [w, setWidth] = useState<number>(window.innerWidth);
+  const [h, setHeight] = useState<number>(window.innerHeight);
+
+  const update = () => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    setCharWidth(getCharWidth());
+    setLineHeight(getLineHeight());
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    setWidth(Math.floor((vw - cw * 2) / cw) * cw);
+    setHeight(Math.floor((vh - cw * 4) / lh) * lh + cw * 2);
+
+    let el = document.getElementById("debug-screen-size");
+    if (!el) {
+      el = document.createElement("div");
+      el.id = "debug-screen-size";
+      el.className = "debug-info";
+      document.body.appendChild(el);
+    }
+    el.innerHTML = `viewport: ${vw}x${vh} |\
+    char: ${format(cw)}x${format(lh)} |\
+    w: ${w} | h: ${h}`;
+    el.style.display = debug ? "block" : "none";
+  };
+
+  useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver(update);
+    if (rootRef.current) resizeObserver.observe(rootRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  const renderTime = useRef<RenderTime>({
+    phase: "none",
+    duration: 0,
+    base: 0,
+  });
+
+  const profilerCallback: ProfilerOnRenderCallback = (
+    _, //id,
+    phase,
+    actualDuration,
+    baseDuration,
+  ) => {
+    renderTime.current = {phase, duration: actualDuration, base: baseDuration};
+    const favicon = document.getElementById("favicon");
+    if (favicon) favicon.style.display = debug ? "block" : "none";
+    const screenSize = document.getElementById("debug-screen-size");
+    if (screenSize) screenSize.style.display = debug ? "block" : "none";
+    /*if (debug)
+      console.info(
+        `%c${id} ${phase}: ${Math.round(actualDuration)} ms / ${Math.round(baseDuration)} ms`,
+        "color:#999",
+      );*/
+  };
+
+  return (
+    <Profiler id="app" onRender={profilerCallback}>
+      <div
+        ref={rootRef}
+        className={cls(styles.root, !darkMode || "dark", !debug || "debug")}
+        style={{
+          marginTop: `${(window.innerHeight - h) / 2}px`,
+          marginLeft: `${(window.innerWidth - w) / 2}px`,
+        }}>
+        <div
+          className={cls("ascii", styles.screen)}
+          style={{
+            width: `${w - cw * 2}px`,
+            height: `${h - cw * 2}px`,
+          }}>
+          <Background
+            w={Math.floor((w - cw * 2) / cw)}
+            h={Math.floor((h - cw * 2) / lh)}
+          />
+          <div
+            className={styles.tty}
+            style={{
+              width: `${w - cw * 2}px`,
+              height: `${h - cw * 2}px`,
+            }}>
+            <Menu />
+            <Line variant="vertical" className={styles["v-line"]} />
+            <div className={styles.content}>
+              <Header darkMode={darkMode} onThemeToggle={themeSwitchHandler} />
+              <Line variant="horizontal" className={styles["h-line"]} />
+              <div ref={bodyRef} className={styles.body}>
+                <Outlet />
+              </div>
+              <Line variant="horizontal" className={styles["h-line"]} />
+              <Footer renderTime={renderTime} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Profiler>
+  );
+};
+
+const App = () => (
+  <Router>
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route path="/" element={<Navigate to="/home" replace />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/chat/:id?" element={<Chat />} />
+        <Route path="/help" element={<Help />} />
+        <Route path="/life" element={<Life />} />
+        <Route path="/version" element={<Version />} />
+      </Route>
+    </Routes>
+  </Router>
+);
+
+export default App;

package/src/Error.tsx

@@ -0,0 +1,80 @@
+import React, {ReactNode} from "react";
+
+import {NAME} from "@commons/constants";
+import Line from "@ui/Line";
+
+import styles from "@/App.module.css";
+
+import cls from "classnames";
+
+type Props = {
+  children: ReactNode;
+};
+
+type State = {
+  hasError: boolean;
+  error?: Error;
+};
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {hasError: true, error};
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error(`YOU DECEIVED ${NAME}`, error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className={styles.root}>
+          <div
+            className={styles.screen}
+            style={{
+              margin: "var(--margin)",
+              padding: 0,
+              width: "calc(100% - var(--margin) * 2)",
+              height: "calc(100% - var(--margin) * 2)",
+            }}>
+            <div
+              className={styles.tty}
+              style={{
+                padding: "var(--margin)",
+                width: "calc(100% - var(--margin) * 2)",
+                height: "calc(100% - var(--margin) * 2)",
+                overflow: "hidden auto",
+              }}>
+              <div className={cls("text", "ascii", styles.error)}>
+                <div>
+                  <span style={{opacity: "var(--opacity-tertiary)"}}>% </span>
+                  <span>error :(</span>
+                </div>
+                <Line className={styles["h-line"]} />
+                <div>{this.state.error?.message}</div>
+                <Line className={styles["h-line"]} />
+                <div
+                  style={{
+                    opacity: "var(--opacity-tertiary)",
+                    textTransform: "none",
+                  }}>
+                  {this.state.error?.stack}
+                </div>
+                <Line className={styles["h-line"]} />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/commons/OmnibotSpeak.module.css

@@ -0,0 +1,43 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
+  opacity: var(--opacity-secondary);
+  p {
+    display: inline-block;
+    padding-bottom: var(--line-height);
+    em {
+      opacity: var(--opacity-primary);
+      color: var(--color-highlight);
+    }
+    a {
+      opacity: var(--opacity-primary);
+      color: var(--color-highlight);
+    }
+  }
+  ul {
+    list-style-position: outside;
+    margin-left: calc(var(--tab-size) * var(--font-width));
+  }
+  ul > :last-child {
+    padding-bottom: 0 !important;
+    p {
+      padding-bottom: 0 !important;
+    }
+  }
+  ol {
+    list-style-position: outside;
+    padding-left: calc(var(--tab-size) * var(--font-width));
+    margin-left: calc(var(--tab-size) * var(--font-width));
+  }
+}
+
+.hr {
+  margin: 0;
+  padding: 0;
+  opacity: var(--opacity-tertiary);
+}
+
+.has-caret > * > :last-child {
+  padding-bottom: 0 !important;
+}

package/src/commons/OmnibotSpeak.tsx

@@ -0,0 +1,31 @@
+import {memo} from "react";
+import Markdown from "react-markdown";
+
+import styles from "@commons/OmnibotSpeak.module.css";
+import Caret from "@ui/Caret";
+import Line from "@ui/Line";
+import {formatText, sanitizeHTML} from "@utils/strings";
+
+import cls from "classnames";
+
+export const OmnibotSpeak = (props: {truth: string; hasCaret?: boolean}) => (
+  <div className={styles["has-caret"]}>
+    <div className={cls("text", styles["root"])}>
+      <Markdown
+        components={{
+          code(props) {
+            const {children, className} = props;
+            return <code className={className}>{children}</code>;
+          },
+          hr() {
+            return <Line char="*" className={styles["hr"]} />;
+          },
+        }}>
+        {formatText(sanitizeHTML(props.truth))}
+      </Markdown>
+    </div>
+    {props.hasCaret && <Caret />}
+  </div>
+);
+
+export default memo(OmnibotSpeak);

package/src/commons/api/api.ts

@@ -0,0 +1,150 @@
+import {
+  ChatCompletion,
+  ChatCompletionChunk,
+  ChatCompletionMessageParam,
+} from "openai/resources/index.mjs";
+import {Stream} from "openai/streaming.mjs";
+
+import {NAME, VERSION} from "@commons/constants";
+import persona from "@commons/persona.txt?raw";
+import {getVariableFromCSS} from "@utils/styles";
+
+export const getData = async (
+  messages: ChatCompletionMessageParam[],
+  stream: boolean = true,
+): Promise<ChatCompletion | Stream<ChatCompletionChunk>> => {
+  const response = await fetch("/api/completion", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      messages,
+      stream,
+    }),
+  });
+  if (!response.ok) {
+    throw new Error(`API request failed: ${response.statusText}`);
+  }
+  if (stream) {
+    if (!response.body) {
+      throw new Error("Response body is not readable");
+    }
+    return Stream.fromSSEResponse(response, new AbortController());
+  } else {
+    const data = await response.json();
+    return data as ChatCompletion;
+  }
+};
+
+export const getSystemConfig = (): ChatCompletionMessageParam => {
+  const size = getVariableFromCSS("base-size");
+  const height = getVariableFromCSS("base-height");
+  const systemConfig = `\
+current date: ${new Date().toLocaleDateString()}. \
+current time: ${new Date().toLocaleDateString()}. \
+current unix EPOCH time: ${Math.floor(Date.now() / 1000)}. \
+a list of random number: ${Array.from({length: 32}, () =>
+    Math.round(Math.random() * 100),
+  ).join(", ")}. \
+current user agent: ${navigator.userAgent}. \
+current color hue: ${getVariableFromCSS("h")}°. \
+current color saturation: ${getVariableFromCSS("s")}%. \
+current color lightness: ${getVariableFromCSS("l")}%. \
+current font base size: ${getVariableFromCSS("BASE-SIZE")}. \
+user can change the color with the "/color [h|s|l] number" command. \
+user can change the font size with the "/size number" command. \
+the "/size" command without parameter will reset the value to ${size}. \
+user can change the line height with the "/height number" command. \
+the "/height" command without parameter will reset the value to ${height}. \
+user can reset the settings with the "/reset" command. \
+${formatting}. \
+your name is ${NAME} and your version is ${VERSION.join(".")}. \
+${persona}`;
+  return {role: "developer", content: systemConfig};
+};
+
+export const formatting = `\
+generate markdown text only, no HTML please! never. \
+use only the 256 first ASCII character in your answers, no unicode. \
+do not use any special characters or emojis or unicode > 0x00ff. \
+make all links you provide clickable, give them a human readable name. \
+very important: output only markdown text, no HTML please. \
+answer with the language used the most by the user in the chat.`;
+
+export const smallQueryFormatting = (max: number): string => `\
+no more than ${max} characters (including spaces)! NO MORE. \
+do not add any comments or punctuations. \
+there is no need to capitalize the first letter of every words. \
+do not add any bullet point or numbered list, just plain text. \
+it's not an answer to a query, make it compact and catchy!`;
+
+export const getChatTitle = async (
+  messages: ChatCompletionMessageParam[],
+): Promise<string> => {
+  const updatedMessages: ChatCompletionMessageParam[] = [
+    getSystemConfig(),
+    ...messages,
+    {
+      role: "developer",
+      content: `\
+make a title for this chat, excluding this request. \
+keep it as simple, short and descriptive as possible. \
+do not mention your name in the result. \`
+${smallQueryFormatting(28)}`,
+    },
+  ];
+  const response = (await getData(updatedMessages, false)) as ChatCompletion;
+  return response.choices[0].message.content || "?";
+};
+
+export const getSubtitle = async (): Promise<string> => {
+  const messages: ChatCompletionMessageParam[] = [
+    getSystemConfig(),
+    {
+      role: "developer",
+      content: `\
+make a list of 5 catch phrase to present you to the user. \
+do not mention your name in the result, it's a motto. \
+emphasize on your infinite source of knowledge. \
+boast yourself to the maximum, demonstrate that your are the best. \
+${smallQueryFormatting(32)}`,
+    },
+  ];
+  const response = (await getData(messages, false)) as ChatCompletion;
+  return response.choices[0].message.content || "?";
+};
+
+export const getPromptPlaceholder = async (): Promise<string> => {
+  const messages: ChatCompletionMessageParam[] = [
+    getSystemConfig(),
+    {
+      role: "developer",
+      content: `\
+make a list of 10 imperatives input placeholder. \
+this input is where the user is asking you question. \
+you are not inviting, you are imposing, user must comply. \
+${smallQueryFormatting(25)}`,
+    },
+  ];
+  const response = (await getData(messages, false)) as ChatCompletion;
+  return response.choices[0].message.content || "?";
+};
+
+export const getStartButton = async (): Promise<string> => {
+  const messages: ChatCompletionMessageParam[] = [
+    getSystemConfig(),
+    {
+      role: "developer",
+      content: `\
+make a name for a button that start a chat in few words. \
+this button bring users to the page where they can make a query. \
+you are not inviting, you are imposing, user must comply. \
+${smallQueryFormatting(25)}`,
+    },
+  ];
+  const response = (await getData(messages, false)) as ChatCompletion;
+  return response.choices[0].message.content || "?";
+};
+
+export default getData;

package/src/commons/constants.ts

@@ -0,0 +1,34 @@
+import pkg from "@root/package.json";
+
+export const NAME = String(pkg["x-display-name"] || pkg.name);
+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 COMPLETION_ID_WILDCARD = "chatcmpl-";
+
+export const ASCII_SPACE = "\u0020";
+export const ASCII_LOSANGE = "\u00ac";
+export const ASCII_BLOCK1 = "\u00fe";
+export const ASCII_BLOCK2 = "\u00ae";
+export const ASCII_BLOCK3 = "\u00b8";
+export const ASCII_RECTANGLE = "\u00ff";
+export const ASCII_VLINE = "\u00af";
+export const ASCII_HLINE = "-";
+export const ASCII_POINT = "\u00a0";
+export const ASCII_PI = "π";
+export const ASCII_CURRENCY = "\u00a8";
+export const ASCII_COPYRIGHT = "©";
+export const ASCII_LDAB = "«";
+export const ASCII_RDAB = "»";
+export const ASCII_DOT = "·";
+export const ASCII_PARAGRAPH = "¶";
+
+export const BUTTON_CREATE = "[+]";
+export const BUTTON_DELETE = "[-]";
+export const BUTTON_SUBMIT = "[ASK]";
+export const BUTTON_PREVIOUS = "<";
+export const BUTTON_NEXT = ">";
+export const BUTTON_LIFE = `[${ASCII_CURRENCY}]`;

package/src/commons/favicon.ts

@@ -0,0 +1,69 @@
+import {AVATAR_1, AVATAR_2} from "@layout/Header";
+import {squircle} from "@utils/canvas";
+import {getColorFromCSS} from "@utils/color";
+
+const favIcon = () => {
+  const dpr = window.devicePixelRatio;
+  const canvas = document.createElement("canvas");
+  const size = 72 * dpr;
+  const w = 128 * dpr;
+  const h = 128 * dpr;
+  const r = 8 * dpr;
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d", {alpha: true});
+  if (!ctx) return;
+
+  squircle(ctx, 0, 0, w, h, r);
+  ctx.clip();
+
+  ctx.globalCompositeOperation = "hard-light";
+
+  ctx.fillStyle = "#000";
+  ctx.fill();
+  ctx.fillStyle = getColorFromCSS("background");
+  ctx.fill();
+  ctx.fill();
+
+  ctx.translate(3 * dpr, -2 * dpr);
+  ctx.font = `normal ${size}px "VT220"`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "top";
+
+  ctx.shadowColor = getColorFromCSS("primary");
+  ctx.shadowBlur = 8 * dpr;
+  ctx.lineWidth = 2 * dpr;
+  ctx.strokeStyle = getColorFromCSS("secondary");
+  ctx.strokeText(AVATAR_1, w / 2, 0);
+  ctx.strokeText(AVATAR_2, w / 2, size * 0.9);
+
+  ctx.shadowBlur = 8 * dpr;
+  ctx.fillStyle = getColorFromCSS("primary");
+  ctx.fillText(AVATAR_1, w / 2, 0);
+  ctx.fillText(AVATAR_2, w / 2, size * 0.9);
+  ctx.fillStyle = getColorFromCSS("highlight");
+  ctx.fillText(AVATAR_1, w / 2, 0);
+  ctx.fillText(AVATAR_2, w / 2, size * 0.9);
+
+  const icon = document.createElement("link");
+  icon.rel = "icon";
+  icon.type = "image/png";
+  icon.href = canvas.toDataURL();
+  document.head.appendChild(icon);
+
+  const preview = document.createElement("img");
+  preview.id = "favicon";
+  preview.src = canvas.toDataURL();
+  preview.style.position = "absolute";
+  preview.style.bottom = "0";
+  preview.style.left = "0";
+  preview.style.width = `8rem`;
+  preview.style.height = `8rem`;
+  preview.style.border = `0.125rem dashed var(--color-primary)`;
+  preview.style.borderRadius = `0.75rem`;
+  preview.style.zIndex = "var(--z-index-debug)";
+  preview.style.display = "none";
+  document.body.appendChild(preview);
+};
+
+export default favIcon;

package/src/commons/hooks/useConfig.tsx

@@ -0,0 +1,50 @@
+import {createContext, FC, ReactNode, useContext, useEffect} from "react";
+
+import useKeyPress from "@hooks/useKeyPress";
+
+import Config, {ConfigType} from "@console/config";
+
+interface ConfigContextType {
+  config: Config;
+  getConfig: () => ConfigType;
+}
+
+const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
+
+interface ConfigProviderProps {
+  children: ReactNode;
+}
+
+export const ConfigProvider: FC<ConfigProviderProps> = ({children}) => {
+  const config = new Config();
+  const getConfig = () => config.config;
+
+  useEffect(() => {
+    config.apply();
+  }, []);
+
+  const debugHotKey = useKeyPress("Escape", {shft: true}, "keydown");
+
+  useEffect(() => {
+    if (debugHotKey === 1) config.update("debug", "", !config.config.debug);
+  }, [debugHotKey]);
+
+  const value: ConfigContextType = {
+    config,
+    getConfig,
+  };
+
+  return (
+    <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>
+  );
+};
+
+export const useConfig = () => {
+  const context = useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error("useConfig must be used within a ConfigProvider");
+  }
+  return context;
+};
+
+export default useConfig;