omnibot3000 1.8.2

package/src/features/console/config.ts

@@ -0,0 +1,106 @@
+import {SESSION_KEY, VERSION} from "@commons/constants";
+import {getVariableFromCSS, setVariableToCSS} from "@utils/styles";
+
+export interface ConfigType {
+  version: string;
+  debug: boolean;
+  color: {
+    h: string;
+    s: string;
+    l: string;
+  };
+  size: number;
+  height: number;
+}
+export type ConfigParam = "debug" | "color" | "size" | "height";
+export type ConfigValue = boolean | string | number;
+
+class Config {
+  declare readonly DEFAULT: ConfigType;
+  declare config: ConfigType;
+
+  static readonly KEY: string = `${SESSION_KEY}_config`;
+
+  constructor() {
+    this.DEFAULT = {
+      version: VERSION.join("."),
+      debug: false,
+      color: {
+        h: getVariableFromCSS("h"),
+        s: getVariableFromCSS("s"),
+        l: getVariableFromCSS("l"),
+      },
+      size: parseInt(getVariableFromCSS("base-size")),
+      height: parseFloat(getVariableFromCSS("base-height")),
+    };
+    this.config = this.read();
+  }
+
+  get configKey(): string {
+    return `${SESSION_KEY}_config`;
+  }
+
+  create(): void {
+    this.save(this.read());
+  }
+
+  read(): ConfigType {
+    let config = JSON.parse(localStorage.getItem(Config.KEY) || "{}");
+    if (Object.keys(config).length === 0) config = this.DEFAULT;
+    if (config.version !== this.DEFAULT.version) config = this.DEFAULT;
+    return config;
+  }
+
+  update(param: ConfigParam, key: string, value: ConfigValue) {
+    switch (param) {
+      case "debug":
+        if (!key && typeof value === "boolean")
+          this.config.debug = value as boolean;
+        break;
+      case "color":
+        switch (key) {
+          case "h":
+          case "s":
+          case "l":
+            this.config.color[key] = value as string;
+            break;
+        }
+        break;
+      case "size":
+      case "height":
+        if (!key && typeof value === "number")
+          this.config[param] = value as number;
+        break;
+    }
+    if (this.config.debug)
+      console.info(
+        `%cconfig updated: ${param} = ${value}`,
+        "color:#999",
+        this.config,
+      );
+    this.save();
+  }
+
+  delete(): void {
+    localStorage.removeItem(Config.KEY);
+    this.config = this.DEFAULT;
+    if (this.config.debug) console.info("%cconfig deleted", "color:#999");
+  }
+
+  save(config?: ConfigType): void {
+    localStorage.setItem(Config.KEY, JSON.stringify(config || this.config));
+    if (this.config.debug) console.info("%cconfig saved", "color:#999");
+  }
+
+  apply(): void {
+    const {color, size, height} = this.config;
+    setVariableToCSS("h", color.h);
+    setVariableToCSS("s", color.s);
+    setVariableToCSS("l", color.l);
+    if (size) setVariableToCSS("font-size", `${size}px`);
+    if (height) setVariableToCSS("line-height", `${height}rem`);
+    if (this.config.debug) console.info("%cconfig applied", "color:#999");
+  }
+}
+
+export default Config;

package/src/features/help/Help.module.css

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

package/src/features/help/Help.tsx

@@ -0,0 +1,78 @@
+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 OmnibotSpeak from "@commons/OmnibotSpeak";
+import Container from "@layout/Container";
+
+import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
+import styles from "@help/Help.module.css";
+
+import cls from "classnames";
+
+const Help = () => {
+  const chatStore = useChatCompletionStore();
+
+  const hasRunOnce = useRef(false);
+  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();
+  }, []);
+
+  return (
+    <div className={styles.root}>
+      <Container>
+        <div className={cls("text", styles.body)}>
+          <OmnibotSpeak truth={response} hasCaret={loading} />
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default memo(Help);

package/src/features/history/History.module.css

@@ -0,0 +1,77 @@
+.root {
+  padding: 0;
+  margin: 0;
+  margin-right: calc(var(--font-width) - var(--scrollbar-size));
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scroll-snap-type: both mandatory;
+  li {
+    list-style-type: none;
+    scroll-snap-align: start;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  transition: opacity var(--duration-fade) ease-out;
+}
+
+.line {
+  margin-left: calc(var(--font-width) * 2);
+  opacity: var(--opacity-tertiary);
+  user-select: none;
+  cursor: default;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--font-width);
+}
+
+.show {
+  opacity: 1;
+  transition: opacity var(--duration-fade) ease-out;
+}
+
+.hide {
+  opacity: 0;
+  transition: opacity var(--duration-fade) ease-out;
+}
+
+.text {
+  text-align: left;
+  flex-grow: 1;
+  text-wrap: wrap;
+  user-select: text;
+}
+
+.selected {
+  opacity: var(--opacity-primary);
+  transition: opacity var(--duration-transition) ease-out;
+}
+
+.selected::before {
+  content: ">";
+  opacity: var(--opacity-secondary);
+  transition: opacity var(--duration-transition) ease-out;
+}
+
+.not-selected {
+  opacity: var(--opacity-secondary);
+  transition: opacity var(--duration-transition) ease-out;
+}
+
+.not-selected::before {
+  content: ">";
+  opacity: 0;
+  transition: opacity var(--duration-transition) ease-out;
+}

package/src/features/history/History.tsx

@@ -0,0 +1,92 @@
+import {memo, useEffect} from "react";
+import {useNavigate} from "react-router-dom";
+
+import {ASCII_HLINE, BUTTON_DELETE} from "@commons/constants";
+import Button from "@ui/Button";
+import {getVariableFromCSS} from "@utils/styles";
+
+import useStorage from "@hooks/useStorage";
+
+import type {Chat, ChatId} from "@chat/hooks/useChatCompletionStore";
+import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
+import styles from "@history/History.module.css";
+
+import cls from "classnames";
+
+const History = () => {
+  const chatStore = useChatCompletionStore();
+  const chatId = chatStore.getChatId();
+  const storage = useStorage();
+
+  const navigate = useNavigate();
+
+  const w = parseInt(getVariableFromCSS("menu-width") ?? 0);
+
+  const removeChat = (chatId: ChatId) => {
+    chatStore.deleteChat(chatId);
+    /* if the removed chat is the current one, we reset to a blank chat */
+    if (chatId === chatStore.chatId) {
+      chatStore.setCompletions();
+      chatStore.setChatId();
+    }
+    storage.save();
+  };
+
+  useEffect(() => {
+    const target = document.getElementById(`chat-history-${chatId}`);
+    if (target)
+      target.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+  }, [chatId]);
+
+  return (
+    <ul className={cls("text", styles.root)}>
+      {chatStore
+        .getChats()
+        .map((chat: Chat) => {
+          const selected = Boolean(chatId === chat.id);
+          const id = `chat-history-${chat.id}`;
+          return (
+            <li
+              key={id}
+              id={id}
+              className={styles[chat.title ? "show" : "hide"]}>
+              <div
+                className={cls(
+                  styles.content,
+                  styles[`${selected ? "" : "not-"}selected`],
+                )}>
+                <button
+                  className={cls("ascii", "text", styles.text, {
+                    opacity: selected ? 1 : 0.7,
+                  })}
+                  onClick={() => {
+                    navigate(`/chat/${chat.id}`);
+                  }}>
+                  {chat.title}
+                </button>
+              </div>
+              <div className={styles.toolbar}>
+                <div className={styles.line}>
+                  {String(ASCII_HLINE).repeat(w - 3 - BUTTON_DELETE.length)}
+                </div>
+                <div className={styles.delete}>
+                  <Button
+                    name={BUTTON_DELETE}
+                    handler={() => {
+                      removeChat(chat.id);
+                    }}
+                  />
+                </div>
+              </div>
+            </li>
+          );
+        })
+        .reverse()}
+    </ul>
+  );
+};
+
+export default memo(History);

package/src/features/home/Home.module.css

@@ -0,0 +1,26 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.button {
+  padding-top: var(--line-height);
+}
+
+.button::before {
+  content: ">";
+  display: inline-block;
+  padding-right: var(--margin);
+  opacity: var(--opacity-tertiary);
+}
+
+.button::after {
+  content: "<";
+  display: inline-block;
+  padding-left: var(--margin);
+  opacity: var(--opacity-tertiary);
+}

package/src/features/home/Home.tsx

@@ -0,0 +1,101 @@
+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 OmnibotSpeak from "@commons/OmnibotSpeak";
+import Container from "@layout/Container";
+import Button from "@ui/Button";
+import {formatText} from "@utils/strings";
+
+import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
+import styles from "@home/Home.module.css";
+
+import cls from "classnames";
+
+const Home = () => {
+  const chatStore = useChatCompletionStore();
+
+  const navigate = useNavigate();
+
+  const hasRunOnce = useRef(false);
+  const [response, setResponse] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [startButton, setStartButton] = useState<string>("");
+
+  const updateStartButton = async () => {
+    const data = await getStartButton();
+    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();
+    chatStore.setCompletions();
+    navigate("/chat");
+  };
+
+  useEffect(() => {
+    if (hasRunOnce.current) return;
+    hasRunOnce.current = true;
+
+    chatStore.resetChat();
+    setLoading(true);
+    getResponse();
+    updateStartButton();
+  }, []);
+
+  return (
+    <div className={styles.root}>
+      <Container>
+        <div className={cls("text", styles.body)}>
+          <OmnibotSpeak truth={response} hasCaret={loading} />
+          {!loading && startButton && (
+            <div className={styles.button}>
+              <Button name={startButton} handler={newChat} className="text" />
+            </div>
+          )}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default memo(Home);

package/src/features/life/Life.module.css

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

package/src/features/life/Life.tsx

@@ -0,0 +1,16 @@
+import {memo, useEffect, useRef} from "react";
+
+import styles from "@life/Life.module.css";
+
+const Life = () => {
+  const hasRunOnce = useRef(false);
+
+  useEffect(() => {
+    if (hasRunOnce.current) return;
+    hasRunOnce.current = true;
+  }, []);
+
+  return <div className={styles.root}></div>;
+};
+
+export default memo(Life);

package/src/features/life/generation.ts

@@ -0,0 +1,103 @@
+import {
+  ASCII_CURRENCY,
+  ASCII_DOT,
+  //ASCII_POINT,
+  ASCII_SPACE,
+} from "@commons/constants";
+import {vec2} from "@utils/math";
+
+import LIFEFORMS from "@life/lifeforms";
+import {Cell, Grid, Lifeform} from "@life/types";
+
+export const init = (w: number, h: number): Grid =>
+  Array.from({length: h}, () => Array.from({length: w}, () => 0));
+
+export const birth = (
+  grid: Grid,
+  lifeform: Lifeform,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+) => {
+  lifeform.forEach((v: vec2): void => {
+    grid[(y + h + v[1]) % h][(x + w + v[0]) % w] = 1;
+  });
+  return grid;
+};
+
+export const randomize = (
+  grid: Grid,
+  n: number,
+  w: number,
+  h: number,
+): Grid => {
+  for (let i = 0; i < n; i++) {
+    birth(
+      grid,
+      LIFEFORMS[Math.round(Math.random() * (LIFEFORMS.length - 1))],
+      Math.round(Math.random() * w),
+      Math.round(Math.random() * h),
+      w,
+      h,
+    );
+  }
+  return grid;
+};
+
+const getCell = (
+  grid: Grid,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+): Cell => grid[(y + h) % h][(x + w) % w];
+
+const countNeighbours = (
+  grid: Grid,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+): number => {
+  let count = 0;
+  if (getCell(grid, x - 1, y - 1, w, h) === 1) count++;
+  if (getCell(grid, x, y - 1, w, h) === 1) count++;
+  if (getCell(grid, x + 1, y - 1, w, h) === 1) count++;
+  if (getCell(grid, x - 1, y, w, h) === 1) count++;
+  if (getCell(grid, x + 1, y, w, h) === 1) count++;
+  if (getCell(grid, x - 1, y + 1, w, h) === 1) count++;
+  if (getCell(grid, x, y + 1, w, h) === 1) count++;
+  if (getCell(grid, x + 1, y + 1, w, h) === 1) count++;
+  return count;
+};
+
+export const tick = (grid: Grid, w: number, h: number): Grid => {
+  const g: Grid = [];
+  let population = 0;
+  for (let y = 0; y < h; y++) {
+    g[y] = [];
+    for (let x = 0; x < w; x++) {
+      const alive = grid[y][x] === 1;
+      const neighbours = countNeighbours(grid, x, y, w, h);
+      if (alive) {
+        g[y][x] = neighbours < 2 || neighbours > 3 ? 2 : 1;
+      } else {
+        g[y][x] = neighbours === 3 ? 1 : 0;
+      }
+      if (g[y][x] === 1) population++;
+    }
+  }
+  if (population === 0) randomize(g, (w * h) / 256, w, h);
+  return g;
+};
+
+export const render = (grid: Grid, w: number): string =>
+  grid
+    .flat()
+    .map(
+      (v, i) =>
+        (v === 1 ? ASCII_CURRENCY : v === 0 ? ASCII_SPACE : ASCII_DOT) +
+        ((i + 1) % w === 0 ? "\n" : ""),
+    )
+    .join("");