omnibot3000 1.8.2

package/src/commons/hooks/useKeyPress.tsx

@@ -0,0 +1,76 @@
+import {useEffect, useState} from "react";
+
+import {clamp} from "@utils/math";
+
+export type Modifiers = {
+  shft?: boolean;
+  ctrl?: boolean;
+  alt?: boolean;
+  meta?: boolean;
+};
+
+export type Detection = "all" | "keydown" | "keyup";
+
+function useKeyPress(
+  targetKey: string,
+  modifiers: Modifiers,
+  detection: Detection = "all",
+): number {
+  const [keyCount, setKeyCount] = useState(0);
+
+  const getModifiers = (e: KeyboardEvent): Modifiers => ({
+    shft: Boolean(e.shiftKey),
+    ctrl: Boolean(e.ctrlKey),
+    alt: Boolean(e.altKey),
+    meta: Boolean(e.metaKey),
+  });
+
+  const detectModifiers = (
+    sourceMod: Modifiers,
+    targetMod: Modifiers,
+  ): boolean =>
+    Boolean(sourceMod.shft) === Boolean(targetMod.shft) &&
+    Boolean(sourceMod.ctrl) === Boolean(targetMod.ctrl) &&
+    Boolean(sourceMod.alt) === Boolean(targetMod.alt) &&
+    Boolean(sourceMod.meta) === Boolean(targetMod.meta);
+
+  const onKeyDownHandler = (key: string, mod: Modifiers): void => {
+    if (detectModifiers(modifiers, mod) && key === targetKey)
+      setKeyCount((n) => clamp(n + 1, 0, 16));
+    else setKeyCount(0);
+  };
+
+  const onKeyUpHandler = (key: string, mod: Modifiers): void => {
+    if (
+      !detectModifiers(modifiers, mod) ||
+      (detectModifiers(modifiers, mod) && key === targetKey)
+    )
+      setKeyCount(0);
+  };
+
+  useEffect(() => {
+    if (detection === "all" || detection === "keydown")
+      window.addEventListener("keydown", (e) =>
+        onKeyDownHandler(e.key, getModifiers(e)),
+      );
+    if (detection === "all" || detection === "keyup")
+      window.addEventListener("keyup", (e) =>
+        onKeyUpHandler(e.key, getModifiers(e)),
+      );
+
+    return () => {
+      if (detection === "all" || detection === "keydown")
+        window.removeEventListener("keydown", (e) =>
+          onKeyDownHandler(e.key, getModifiers(e)),
+        );
+      if (detection === "all" || detection === "keyup")
+        window.removeEventListener("keyup", (e) =>
+          onKeyUpHandler(e.key, getModifiers(e)),
+        );
+    };
+  }, []); // create this event only on first run
+
+  return keyCount;
+}
+
+export default useKeyPress;

package/src/commons/hooks/useStorage.tsx

@@ -0,0 +1,38 @@
+import {SESSION_KEY} from "@commons/constants";
+
+import useConfig from "@hooks/useConfig";
+
+import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
+
+function useStorage() {
+  const config = useConfig();
+  const chatStore = useChatCompletionStore();
+
+  const {debug} = config.getConfig();
+
+  const load = () => {
+    try {
+      const data = localStorage.getItem(`${SESSION_KEY}_data`);
+      if (data) {
+        chatStore.importData(JSON.parse(data));
+        if (debug) console.info("%cdata loaded", "color:#999");
+      }
+    } catch (error) {
+      console.error("failed to load:", error);
+    }
+  };
+
+  const save = () => {
+    try {
+      const data = chatStore.exportData();
+      localStorage.setItem(`${SESSION_KEY}_data`, JSON.stringify(data));
+      if (debug) console.info("%cdata saved", "color:#999");
+    } catch (error) {
+      console.error("failed to save:", error);
+    }
+  };
+
+  return {load, save};
+}
+
+export default useStorage;

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

@@ -0,0 +1,47 @@
+.root {
+  display: relative;
+  width: 100%;
+  height: 100%;
+  opacity: var(--opacity-ghosting);
+  z-index: var(--z-index-background);
+}
+
+.board {
+  position: absolute;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  opacity: 0;
+}
+
+.cursor {
+  position: absolute;
+  width: var(--font-width);
+  height: var(--line-height);
+  opacity: var(--opacity-ghosting);
+}
+
+.life {
+  animation: life var(--duration-lifespan) ease-out;
+}
+
+@keyframes life {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.death {
+  animation: death var(--duration-lifespan) ease-in;
+}
+
+@keyframes death {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/src/commons/layout/Background.tsx

@@ -0,0 +1,138 @@
+import {useEffect, useRef, useState} from "react";
+
+import {ASCII_CURRENCY} from "@commons/constants";
+import styles from "@layout/Background.module.css";
+import {vec2} from "@utils/math";
+import {getCharWidth, getLineHeight} from "@utils/strings";
+import {getVariableFromCSS} from "@utils/styles";
+
+import useConfig from "@hooks/useConfig";
+
+import {birth, init, render, tick} from "@life/generation";
+import {Grid} from "@life/types";
+import cls from "classnames";
+
+const Background = (props: {w: number; h: number}) => {
+  const config = useConfig();
+  const {debug} = config.getConfig();
+  const {w, h} = props;
+
+  const [grid, setGrid] = useState<Grid>(init(w, h));
+  const [generation, setGeneration] = useState(0);
+  const [board, setBoard] = useState<string[]>(["", ""]);
+  const [cursor, setCursor] = useState<vec2>([0, 0]);
+  const [clicked, setClicked] = useState<boolean>(false);
+
+  const refBoard1 = useRef<HTMLDivElement>(null);
+  const refBoard2 = useRef<HTMLDivElement>(null);
+  const refCursor = useRef<HTMLDivElement>(null);
+
+  const board1 = refBoard1.current;
+  const board2 = refBoard2.current;
+  const cur = refCursor.current;
+
+  const mouseMoveHandler = (event: MouseEvent) => {
+    setCursor([event.clientX, event.clientY]);
+  };
+
+  const mouseDownHandler = () => {
+    setGeneration((n) => n + 1);
+    setClicked(true);
+  };
+
+  const mouseUpHandler = () => {
+    setClicked(false);
+    setGeneration((n) => n + 1);
+  };
+
+  useEffect(() => {
+    window.addEventListener("mousemove", mouseMoveHandler);
+    window.addEventListener("mousedown", mouseDownHandler);
+    window.addEventListener("mouseup", mouseUpHandler);
+    return () => {
+      window.removeEventListener("mousemove", mouseMoveHandler);
+      window.removeEventListener("mousedown", mouseDownHandler);
+      window.removeEventListener("mouseup", mouseUpHandler);
+    };
+  }, []);
+
+  const update = () => {
+    if (!clicked) setGrid((grid) => tick(grid, w, h));
+    setBoard((board) => {
+      const b = [...board];
+      b[generation % 2] = render(grid, w);
+      return b;
+    });
+    if (!board1 || !board2) return;
+    if (generation % 2 === 0) {
+      board1.classList.add(styles.life);
+      board2.classList.add(styles.death);
+      board1.classList.remove(styles.death);
+      board2.classList.remove(styles.life);
+    } else {
+      board1.classList.add(styles.death);
+      board2.classList.add(styles.life);
+      board1.classList.remove(styles.life);
+      board2.classList.remove(styles.death);
+    }
+    /*if (generation % 100 === 0) setGrid((grid) => randomize(grid, 1, w, h));*/
+  };
+
+  useEffect(() => {
+    const board = refBoard1.current;
+    if (!board) return;
+    const cw = getCharWidth();
+    const lh = getLineHeight();
+    const rect = board.getBoundingClientRect();
+    const bw = rect.width;
+    const bh = rect.height;
+    if (!bw || !bh) return;
+    const bx = cursor[0] - rect.left;
+    const by = cursor[1] - rect.top;
+    const x = Math.floor((bx / bw) * w);
+    const y = Math.floor((by / bh) * h);
+    if (clicked) {
+      setGrid((grid) => birth(grid, [[0, 0]], x, y, w, h));
+      update();
+    }
+    if (!cur) return;
+    cur.style.left = `${cw + x * cw}px`;
+    cur.style.top = `${cw + y * lh}px`;
+    cur.style.opacity = `var(--opacity-${clicked ? "tertiary" : "ghosting"})`;
+    document.body.style.cursor = clicked ? "pointer" : "default";
+    cur.style.visibility =
+      x >= 0 && x < bw / cw && y >= 0 && y < bh / lh ? "visible" : "hidden";
+  }, [cursor, clicked]);
+
+  useEffect(() => {
+    update();
+  }, [generation]);
+
+  useEffect(() => {
+    const lifespan = parseInt(getVariableFromCSS("lifespan")) || 0;
+    setGrid(tick(init(w, h), w, h));
+    const interval = setInterval(() => {
+      setGeneration((n) => n + 1);
+    }, lifespan);
+    if (debug) console.info(`%cresize grid: ${w} x ${h}`, "color:#999");
+    return () => clearInterval(interval);
+  }, [w, h]);
+
+  return (
+    <>
+      <div className={cls("ascii", styles.root)}>
+        <div ref={refBoard1} className={styles.board}>
+          {board[0]}
+        </div>
+        <div ref={refBoard2} className={styles.board}>
+          {board[1]}
+        </div>
+      </div>
+      <div ref={refCursor} className={cls("ascii", styles.cursor)}>
+        {ASCII_CURRENCY}
+      </div>
+    </>
+  );
+};
+
+export default Background;

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

@@ -0,0 +1,28 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: center;
+}
+
+.separator {
+  opacity: var(--opacity-tertiary);
+}
+
+.path {
+  animation: fadein var(--duration-fade) forwards;
+}
+
+.button {
+  text-transform: uppercase;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/commons/layout/Breadcrumb.tsx

@@ -0,0 +1,54 @@
+import {Fragment, memo, useEffect, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+
+import {NAME} from "@commons/constants";
+import styles from "@layout/Breadcrumb.module.css";
+import Button from "@ui/Button";
+
+import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
+
+const Breadcrumb = () => {
+  const chatStore = useChatCompletionStore();
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [path, setPath] = useState<string[]>([]);
+
+  useEffect(() => {
+    const path = location.pathname.split("/").filter((v) => v.trim() !== "");
+    switch (path[0]) {
+      case "chat":
+        if (path[1]) path[1] = "id";
+        break;
+    }
+    setPath(path);
+    document.title = `${NAME} /${path.join("/")}`;
+  }, [location]);
+
+  return (
+    <nav className={styles.root}>
+      {path.map((v, i) => {
+        return (
+          <Fragment key={`breadcrumb-${i}`}>
+            <span className={styles.separator}>/</span>
+            {i < path.length - 1 ? (
+              <Button
+                className={styles.button}
+                name={v}
+                handler={() => {
+                  if (v === "chat") chatStore.resetChat();
+                  navigate(`/${path.slice(0, i + 1).join("/")}`);
+                }}
+              />
+            ) : (
+              <span>{v}</span>
+            )}
+          </Fragment>
+        );
+      })}
+    </nav>
+  );
+};
+
+export default memo(Breadcrumb);

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

@@ -0,0 +1,51 @@
+.root {
+  width: 100%;
+  height: fit-content;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none;
+  scroll-snap-type: both mandatory;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  ul {
+    margin-bottom: 0 !important;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: end;
+  width: 100%;
+  max-width: calc((var(--content-width) - 3) * var(--font-width));
+  height: fit-content;
+}
+
+.content > :first-child {
+  div {
+    margin-top: 0 !important;
+  }
+}
+
+.snap {
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: end;
+  width: var(--font-width);
+  opacity: var(--opacity-secondary);
+  visibility: hidden;
+  list-style-type: none;
+  li {
+    scroll-snap-align: start;
+  }
+}
+
+#end-of-line {
+  width: 100%;
+  max-width: calc((var(--content-width) - 3) * var(--font-width));
+}

package/src/commons/layout/Container.tsx

@@ -0,0 +1,60 @@
+import {memo, ReactNode, useEffect, useRef} from "react";
+
+import styles from "@layout/Container.module.css";
+import {getCharWidth} from "@utils/strings";
+
+import ScrollSnap from "../ui/ScrollSnap";
+
+export const Container = ({children}: {children: ReactNode}) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const cw = getCharWidth();
+
+  const update = () => {
+    const content = contentRef.current;
+    if (!content) return;
+
+    const body = rootRef.current?.parentElement?.parentElement;
+    if (!body) return;
+
+    const bodyWidth = body.offsetWidth ?? 0;
+    const contentWidth = content.clientWidth ?? 0;
+
+    const n = Math.floor((bodyWidth - contentWidth) / 2 / cw);
+    body.style.paddingLeft = `calc(${n} * var(--font-width))`;
+  };
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(update);
+    if (contentRef.current) resizeObserver.observe(contentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    const eol = document.getElementById("end-of-line");
+    if (eol) {
+      eol.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }, [children]);
+
+  return (
+    <div ref={rootRef} className={styles.root}>
+      <div className={styles.container}>
+        <ScrollSnap content={contentRef} className={styles.snap} />
+        <div ref={contentRef} className={styles.content}>
+          {children}
+        </div>
+      </div>
+      <a id="end-of-line" />
+    </div>
+  );
+};
+
+export default memo(Container);

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

@@ -0,0 +1,36 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  column-gap: var(--font-width);
+  align-items: start;
+  align-self: stretch;
+  padding-left: var(--font-width);
+  height: fit-content;
+  animation: fadein var(--duration-fade) forwards;
+}
+
+.spacing {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--font-width);
+}
+
+.copyright {
+  opacity: var(--opacity-tertiary);
+}
+
+.info {
+  opacity: var(--opacity-secondary);
+  word-break: break-all;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/commons/layout/Footer.tsx

@@ -0,0 +1,74 @@
+import {RefObject} from "react";
+import {useNavigate} from "react-router-dom";
+
+import {
+  ASCII_COPYRIGHT,
+  ASCII_CURRENCY,
+  AUTHOR,
+  NAME,
+  VERSION,
+} from "@commons/constants";
+import Breadcrumb from "@layout/Breadcrumb";
+import styles from "@layout/Footer.module.css";
+import Button from "@ui/Button";
+import Separator from "@ui/Separator";
+import Spacer from "@ui/Spacer";
+import {numberToRoman} from "@utils/math";
+import {isDev} from "@utils/system";
+
+import useConfig from "@hooks/useConfig";
+
+import {RenderTime} from "@/App";
+
+import cls from "classnames";
+
+const Footer = (props: {renderTime: RefObject<RenderTime>}) => {
+  const {phase, duration} = props.renderTime.current;
+
+  const config = useConfig();
+  const {debug} = config.getConfig();
+
+  const navigate = useNavigate();
+
+  const versionHandler = () => {
+    navigate("/version");
+  };
+
+  return (
+    <footer className={cls("text", styles.root)}>
+      <div 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">
+          {AUTHOR.name}
+        </a>
+      </div>
+      <Separator />
+      <Breadcrumb />
+      <Spacer />
+      {isDev() && (
+        <>
+          <div className={styles.spacing}>
+            <span className={styles.info}>{`${phase}:`}</span>
+            <span style={{whiteSpace: "nowrap"}}>
+              {duration.toFixed(1)}
+              <span className={styles.info}>ms</span>
+            </span>
+          </div>
+          <Separator />
+        </>
+      )}
+      {debug && <div className={styles.info}>{ASCII_CURRENCY}</div>}
+      <div className={styles.spacing}>
+        <span className={styles.info}>ver </span>
+        <Button name={VERSION.join(".")} handler={versionHandler} />
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

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

@@ -0,0 +1,73 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  column-gap: var(--font-width);
+  align-items: center;
+  align-self: stretch;
+  padding-left: var(--font-width);
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--font-width);
+  height: fit-content;
+}
+
+.title {
+  display: inline-block;
+  text-wrap: wrap;
+  text-overflow: ellipsis;
+  width: fit-content;
+  opacity: var(--opacity-primary);
+}
+
+.subtitle {
+  min-height: var(--line-height);
+  opacity: var(--opacity-secondary);
+}
+
+.subtext {
+  animation: fadein var(--duration-fade) forwards;
+}
+
+.gradient {
+  margin-left: var(--font-width);
+  margin-right: var(--font-width);
+  opacity: var(--opacity-tertiary);
+  text-transform: none;
+  user-select: none;
+}
+
+.avatar {
+  display: flex;
+  flex: row;
+  column-gap: var(--font-width);
+  align-items: flex-start;
+  opacity: 0;
+  animation: fadein var(--duration-fade) forwards;
+}
+
+.help {
+  height: var(--line-height);
+  opacity: var(--opacity-tertiary) !important;
+}
+
+.button {
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-align: right;
+  width: fit-content;
+  height: fit-content;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}