omnibot3000 1.8.2

package/src/features/chat/hooks/useChatCompletionStore.tsx

@@ -0,0 +1,160 @@
+import {create} from "zustand";
+
+import {ChatCompletionMessageParam} from "openai/resources/index.mjs";
+
+import {formatCompletionId} from "@chat/commons/strings";
+
+export type ChatId = string | undefined;
+
+export interface Chat {
+  id: ChatId;
+  title: string;
+  created: EpochTimeStamp;
+  index: number;
+  completions: Completion[];
+}
+
+export type CompletionId = string | undefined;
+
+export interface Completion {
+  id: CompletionId;
+  created: EpochTimeStamp;
+  model: string;
+  prompt: string;
+  message: string;
+  index: number;
+  children: Completion[];
+  parentCompletion: CompletionId | undefined;
+}
+
+export interface Data {
+  chats: Chat[];
+}
+
+export interface ChatCompletionStoreState {
+  chatId: ChatId;
+  setChatId: (id?: ChatId) => void;
+  getChatId: () => ChatId;
+  chats: Chat[];
+  createChat: (completion: Completion) => void;
+  getChats: () => Chat[];
+  getChat: (id?: ChatId) => Chat | undefined;
+  updateChatTitle: (id: ChatId, title: string) => void;
+  deleteChat: (id?: ChatId) => void;
+  resetChat: () => void;
+  completionId: CompletionId;
+  setCompletionId: (id?: CompletionId) => void;
+  getCompletionId: () => CompletionId;
+  completions: Completion[];
+  getCompletions: (id: ChatId) => Completion[];
+  setCompletions: (id?: ChatId) => void;
+  getCompletion: (id: CompletionId) => Completion | undefined;
+  addCompletion: (completion: Completion) => void;
+  updateCompletions: (id: ChatId) => void;
+  deleteCompletion: (id: CompletionId) => void;
+  messages: ChatCompletionMessageParam[];
+  getMessages: (id: ChatId) => ChatCompletionMessageParam[];
+  exportData: () => Data;
+  importData: (data: Data) => void;
+}
+
+const useChatCompletionStore = create<ChatCompletionStoreState>()(
+  (set, get) => ({
+    chatId: undefined,
+    setChatId: (id?: ChatId) => set({chatId: id}),
+    getChatId: () => get().chatId,
+    chats: [],
+    createChat: (completion: Completion) => {
+      const id = formatCompletionId(completion.id);
+      set((state) => ({
+        chatId: id,
+        completionId: id,
+        chats: [
+          ...state.chats,
+          {
+            id,
+            title: "",
+            created: completion.created, //new Date().getTime(),
+            index: 0,
+            completions: [completion],
+          },
+        ],
+      }));
+    },
+    getChats: () => get().chats,
+    getChat: (id?: ChatId) =>
+      get().chats.find((chat: Chat) => Boolean(id === chat.id)),
+    updateChatTitle: (id: ChatId, title: string) => {
+      const updatedChats: Chat[] = get().chats.map(
+        (chat: Chat): Chat => (chat.id === id ? {...chat, title} : chat),
+      );
+      set({chats: updatedChats});
+    },
+    deleteChat: (id?: ChatId) => {
+      const index = get().chats.findIndex((chat: Chat) => id === chat.id);
+      if (index !== -1) {
+        const updatedChats = [...get().chats];
+        updatedChats.splice(index, 1);
+        set({chats: updatedChats});
+      }
+    },
+    resetChat: () => {
+      set({
+        chatId: undefined,
+        completionId: undefined,
+        completions: [],
+        messages: [],
+      });
+    },
+    completionId: undefined,
+    setCompletionId: (id?: CompletionId) => set({completionId: id}),
+    getCompletionId: () => get().completionId,
+    completions: [],
+    getCompletions: (id: ChatId) => get().getChat(id)?.completions || [],
+    setCompletions: (id?: ChatId) =>
+      set({
+        completions: id ? [...get().getCompletions(id)] : [],
+      }),
+    getCompletion: (id: CompletionId) =>
+      get().completions.find((completion: Completion) => completion.id === id),
+    addCompletion: (completion: Completion) =>
+      set((state) => ({
+        completions: [...state.completions, completion],
+      })),
+    updateCompletions: (id: ChatId) => {
+      const updatedChats: Chat[] = get().chats.map(
+        (chat: Chat): Chat =>
+          chat.id === id ? {...chat, completions: get().completions} : chat,
+      );
+      set({chats: updatedChats});
+    },
+    deleteCompletion: (id: CompletionId) => {
+      const completion = get().getCompletion(id);
+      if (!completion) return;
+      const parent = get().getCompletion(completion.parentCompletion || "");
+      if (!parent) return;
+      parent.children.splice(completion.index, 1);
+    },
+    messages: [],
+    getMessages: (id: ChatId) =>
+      get()
+        .getCompletions(id)
+        .map((completion: Completion) => {
+          return [
+            {role: "user", content: completion.prompt},
+            {role: "assistant", content: completion.message},
+          ];
+        })
+        .flat(Infinity) as ChatCompletionMessageParam[],
+    exportData: (): Data => {
+      return {
+        chats: get().chats,
+      };
+    },
+    importData: (data: Data) => {
+      set({chats: [...data.chats]});
+    },
+  }),
+);
+
+export default useChatCompletionStore;

package/src/features/cli/Cli.module.css

@@ -0,0 +1,75 @@
+.form {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 1;
+  column-gap: var(--font-width);
+  align-items: end;
+  margin-left: var(--font-width);
+  margin-right: var(--font-width);
+  max-width: calc((var(--content-width) - 3) * var(--font-width));
+}
+
+.input {
+  display: none;
+}
+
+.pill {
+  align-self: start;
+}
+
+.command {
+  flex-grow: 1;
+  width: calc(var(--content-width) - 2 * var(--font-width));
+  min-height: var(--line-height);
+}
+
+.command-line {
+  position: relative;
+  display: inline;
+  clear: both;
+  float: left;
+  width: 100%;
+  min-height: var(--line-height);
+  text-transform: none !important;
+  user-select: text !important;
+  cursor: text !important;
+  text-wrap: wrap;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.placeholder {
+  position: absolute;
+  height: var(--line-height);
+  user-select: none !important;
+  cursor: default !important;
+}
+
+.show {
+  height: var(--line-height);
+  opacity: var(--opacity-tertiary);
+  transition: opacity var(--duration-fade) ease-out;
+}
+
+.hide {
+  height: var(--line-height);
+  opacity: 0;
+  transition: opacity var(--duration-fade) ease-out;
+}
+
+.caret {
+  position: absolute;
+  display: inline;
+  left: 0;
+  top: 0;
+  width: 100%;
+  text-wrap: wrap;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.submit {
+  flex-grow: 0;
+  place-self: start;
+}

package/src/features/cli/Cli.tsx

@@ -0,0 +1,303 @@
+import React, {FormEvent, memo, useEffect, useRef, useState} from "react";
+
+import {getPromptPlaceholder} from "@api/api";
+import {BUTTON_SUBMIT} from "@commons/constants";
+import Caret from "@ui/Caret";
+import {formatText} from "@utils/strings";
+import {getVariableFromCSS} from "@utils/styles";
+
+import useConfig from "@hooks/useConfig";
+
+import cmd from "@console/cmd";
+
+import styles from "@cli/Cli.module.css";
+
+import cls from "classnames";
+
+export const KEYS: string[] = [
+  "Escape",
+  "Control",
+  "Meta",
+  "Shift",
+  "Alt",
+  "Dead",
+  "CapsLock",
+  "Insert",
+  "Delete",
+];
+
+export const RenderCli = (props: {
+  command: string[];
+  line: number;
+  caret: number;
+}) => {
+  const {command, line, caret} = props;
+  return (
+    <div
+      style={{
+        height: `calc(${command.length} * var(--line-height))`,
+      }}>
+      {command.map((text: string, i: number) => {
+        return (
+          <div
+            key={`command-line-${i}`}
+            className={styles["command-line"]}
+            style={{clear: i > 0 ? "both" : "none"}}>
+            {text}
+            {i === line ? (
+              <div className={cls("blink", styles.caret)}>
+                <span style={{visibility: "hidden"}}>{"%".repeat(caret)}</span>
+                <Caret />
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const Cli = (props: {
+  loading: boolean;
+  prompt: string[];
+  setPrompt: React.Dispatch<React.SetStateAction<string[]>>;
+  submitHandler: (query: string) => void;
+}) => {
+  const {loading, prompt, setPrompt, submitHandler} = props;
+
+  const keyEvent = useRef<KeyboardEvent>(undefined);
+  const hasRunOnce = useRef<boolean>(false);
+
+  const [placeholders, setPlaceholders] = useState<string[]>([]);
+  const [count, setCount] = useState<number>(0);
+  const [line, setLine] = useState<number>(0);
+  const [caret, setCaret] = useState<number>(0);
+  const [forceUpdate, setForceUpdate] = useState<number>(0);
+
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const isDisabled = loading || String(prompt).replace("\n", "").trim() === "";
+
+  const config = useConfig();
+  const {debug} = config.getConfig();
+
+  const updatePlaceholder = async () => {
+    const data = await getPromptPlaceholder();
+    setPlaceholders(
+      data
+        .split("\n")
+        .filter((v) => v.trim() !== "")
+        .map((v) => formatText(v.trim())),
+    );
+  };
+
+  function handleInput(e: KeyboardEvent): void {
+    keyEvent.current = e;
+    setForceUpdate((n) => (n + 1) % 256);
+  }
+
+  useEffect(() => {
+    const {key, shiftKey, ctrlKey, metaKey} = keyEvent.current || {};
+
+    if (!key || KEYS.includes(key)) return;
+
+    const tabSize = parseInt(getVariableFromCSS("tab-size")) || 2;
+
+    let p = [...prompt];
+    let l = line;
+    let c = caret;
+
+    switch (key) {
+      case "Enter":
+        if (shiftKey) {
+          l++;
+          p.splice(l, 0, p[l - 1].substring(c));
+          p[l - 1] = p[l - 1].substring(0, c);
+        } else {
+          if (p[0].charAt(0) === "/") {
+            cmd(p[0].substring(1), debug);
+          } else {
+            submitHandler(p.join("\n").trim());
+          }
+          p = [""];
+          l = 0;
+        }
+        c = 0;
+        break;
+      case "Tab":
+        p[l] += " ".repeat(tabSize);
+        c += tabSize;
+        break;
+      case "Backspace":
+        if (c > 0) {
+          p[l] = `${p[l].substring(0, c - 1)}${p[l].substring(c)}`;
+          c--;
+        } else if (l > 0) {
+          l--;
+          p[l] += p[l + 1];
+          c = p[l].length - p[l + 1].length;
+          p.splice(l + 1, 1);
+        }
+        break;
+      case "ArrowLeft":
+        c--;
+        if (c < 0) {
+          if (l > 0) {
+            l--;
+            c = p[l].length;
+          } else {
+            c = 0;
+          }
+        }
+        break;
+      case "ArrowRight":
+        c++;
+        if (c > p[l].length) {
+          if (l < prompt.length - 1) {
+            l++;
+            c = 0;
+          } else {
+            c = p[l].length;
+          }
+        }
+        break;
+      case "ArrowUp":
+        l--;
+        if (l < 0) {
+          l = 0;
+          c = 0;
+        } else {
+          c = Math.min(c, p[l].length);
+        }
+        break;
+      case "ArrowDown":
+        l++;
+        if (l > prompt.length - 1) {
+          l = prompt.length - 1;
+          c = p[l].length;
+        } else {
+          c = Math.min(c, p[l].length);
+        }
+        break;
+      case "PageUp":
+        c = 0;
+        break;
+      case "PageDown":
+        c = p[l].length;
+        break;
+      case "Home":
+        l = 0;
+        c = 0;
+        break;
+      case "End":
+        l = prompt.length - 1;
+        c = p[l].length;
+        break;
+      default:
+        if (!ctrlKey && !metaKey) {
+          p[l] = `${p[l].substring(0, c)}${key}${p[l].substring(c)}`;
+          c++;
+        }
+    }
+
+    if (ctrlKey) {
+      switch (key) {
+        case "a":
+          c = 0;
+          break;
+        case "e":
+          c = p[l].length;
+          break;
+        case "u":
+          p[l] = p[l].substring(c);
+          c = 0;
+          break;
+        case "k":
+          p[l] = p[l].substring(0, c);
+          break;
+      }
+    }
+
+    setPrompt(p);
+    setLine(l);
+    setCaret(c);
+  }, [forceUpdate]);
+
+  const pasteQuery = (e: ClipboardEvent) => {
+    const data = e.clipboardData;
+    if (!data) return;
+    const text = data.getData("text/plain");
+    if (text.trim() === "") return;
+    const query = text.split("\n");
+    setPrompt(query);
+    setLine(query.length - 1);
+    setCaret(query[query.length - 1].length);
+  };
+
+  useEffect(() => {
+    if (hasRunOnce.current) return;
+    hasRunOnce.current = true;
+
+    updatePlaceholder();
+
+    window.addEventListener("paste", (e) => pasteQuery(e));
+    window.addEventListener("keydown", (e) => handleInput(e));
+    return () => {
+      window.removeEventListener("keydown", (e) => handleInput(e));
+      window.removeEventListener("paste", (e) => pasteQuery(e));
+    };
+  }, []);
+
+  useEffect(() => {
+    if (prompt[prompt.length - 1].length === 0)
+      setCount(Math.round(Math.random() * (placeholders.length - 1)));
+  }, [prompt[prompt.length - 1], placeholders]);
+
+  return (
+    <form
+      ref={formRef}
+      onSubmit={(e: FormEvent) => {
+        e.preventDefault();
+        submitHandler(prompt.join("\n").trim());
+        setPrompt([""]);
+        setLine(0);
+        setCaret(0);
+      }}
+      onPaste={(e: React.ClipboardEvent) => {
+        e.preventDefault();
+        pasteQuery(e.nativeEvent);
+      }}
+      className={styles.form}>
+      <div className={styles.pill}>{">"}</div>
+      <div className={cls("ascii", styles.command)}>
+        <div className={cls("text", styles.placeholder)}>
+          <div
+            className={
+              styles[
+                prompt.join() || placeholders.length === 0 ? "hide" : "show"
+              ]
+            }>
+            {placeholders[count]}
+          </div>
+        </div>
+        <RenderCli command={prompt} line={line} caret={caret} />
+      </div>
+      <input
+        name="command"
+        className={styles.input}
+        defaultValue={!loading && prompt ? prompt : ""}
+        autoComplete="off"
+      />
+      <div>
+        <button
+          type="submit"
+          disabled={isDisabled}
+          className={cls("ascii", styles.submit)}>
+          {BUTTON_SUBMIT}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default memo(Cli);

package/src/features/console/cmd.ts

@@ -0,0 +1,93 @@
+import {clamp} from "@utils/math";
+import {getVariableFromCSS, setVariableToCSS} from "@utils/styles";
+
+import Config, {ConfigValue} from "@console/config";
+
+const cmd = (query: string, debug: boolean) => {
+  if (query.trim() === "") return;
+
+  const config = new Config();
+
+  const [cmd, arg1, arg2] = query.toLowerCase().split(" ");
+
+  let value: ConfigValue = "";
+
+  switch (cmd) {
+    case "reboot":
+      window.location.reload();
+      return;
+    case "reset":
+      config.delete();
+      window.location.reload();
+      return;
+    case "help":
+      window.location.pathname = "/help";
+      return;
+    case "debug":
+      switch (arg1) {
+        case "on":
+          value = true;
+          break;
+        case "off":
+          value = false;
+          break;
+        case undefined:
+          value = !debug;
+          break;
+        default:
+          console.warn(`unknown debug command "${arg1}"`);
+          return;
+      }
+      config.update(cmd, "", value);
+      break;
+    case "color":
+      if (!arg1 || !arg2) {
+        console.warn(`missing arguments for command "${cmd}"`);
+        return;
+      }
+      switch (arg1) {
+        case "h":
+          value = clamp(parseFloat(arg2), 0, 360).toFixed(1);
+          break;
+        case "s":
+          value = clamp(parseInt(arg2), 0, 100).toFixed(0);
+          break;
+        case "l":
+          value = clamp(parseInt(arg2), 0, 100).toFixed(0);
+          break;
+      }
+      setVariableToCSS(arg1, value);
+      config.update(cmd, arg1, value);
+      break;
+    case "size":
+      value = clamp(
+        parseInt(arg1) ?? parseInt(getVariableFromCSS("base-size")),
+        4,
+        32,
+      );
+      setVariableToCSS("font-size", `${value}px`);
+      config.update(cmd, "", value);
+      window.location.reload();
+      break;
+    case "height":
+      value = clamp(
+        parseFloat(arg1) ?? parseInt(getVariableFromCSS("base-height")),
+        0.6,
+        4,
+      );
+      setVariableToCSS("line-height", `${value.toFixed(1)}rem`);
+      config.update(cmd, "", value);
+      window.location.reload();
+      break;
+    default:
+      console.warn(`unknown command "${cmd}"`);
+      return;
+  }
+
+  if (debug && !value) {
+    console.warn(`no value set for command "${cmd}"`);
+    return;
+  }
+};
+
+export default cmd;