@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/components/Chat/useChatState.ts

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from "react";
+import { useFileDropZone } from "../FileInput/useFileDropZone";
+import type { ChatProps } from "./Chat";
+import { useChatFileUpload } from "./useChatFileUpload";
+import { useChatOnPaste } from "./useChatOnPaste";
+
+export type ChatState = ReturnType<typeof useChatState>;
+export const useChatState = (
+  props: Pick<
+    ChatProps,
+    | "messages"
+    | "onSend"
+    | "isLoading"
+    | "currentlyTypedMessage"
+    | "onCurrentlyTypedMessageChange"
+  > & {
+    textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  },
+) => {
+  const { messages, onSend, isLoading, textAreaRef, currentlyTypedMessage } =
+    props;
+
+  const [scrollRef, setScrollRef] = useState<HTMLDivElement | null>(null);
+
+  const lastMessageId = messages.at(-1)?.id;
+  useEffect(() => {
+    if (scrollRef) {
+      setTimeout(() => {
+        scrollRef.scrollTo(0, scrollRef.scrollHeight);
+        /** Wait for base64 images to load and resize */
+      }, 10);
+    }
+  }, [lastMessageId, scrollRef]);
+
+  const getCurrentMessage = useCallback(
+    () => textAreaRef.current?.value || currentlyTypedMessage || "",
+    [currentlyTypedMessage, textAreaRef],
+  );
+  const setCurrentMessage = useCallback(
+    (msg: string) => {
+      if (!textAreaRef.current) return;
+      textAreaRef.current.value = msg;
+      /** Scroll to end */
+      textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
+    },
+    [textAreaRef],
+  );
+
+  const [sendingMsg, setSendingMsg] = useState(false);
+  const fileState = useChatFileUpload();
+  const {
+    filesWithInfo,
+    setFiles,
+    convertDocsToMarkdown,
+    setConvertDocsToMarkdown,
+    convertingDocumentName,
+    getConvertedDocs,
+    onAddFiles,
+    files,
+  } = fileState;
+
+  const sendMsg = useCallback(async () => {
+    const msg = getCurrentMessage();
+
+    if (!msg.trim() && !filesWithInfo?.length) {
+      return;
+    }
+    setSendingMsg(true);
+    try {
+      const { otherFiles = [], docFilesMessages } = await getConvertedDocs();
+      await onSend(
+        [{ type: "text", text: msg }, ...docFilesMessages],
+        otherFiles.map((f) => f.file),
+      );
+      setCurrentMessage("");
+      setFiles([]);
+    } catch (e) {
+      console.error(e);
+    }
+    setSendingMsg(false);
+  }, [
+    getCurrentMessage,
+    filesWithInfo?.length,
+    getConvertedDocs,
+    onSend,
+    setCurrentMessage,
+    setFiles,
+  ]);
+  const chatIsLoading = isLoading || sendingMsg;
+
+  const { handleOnPaste } = useChatOnPaste({
+    textAreaRef: textAreaRef,
+    onAddFiles,
+    setCurrentMessage,
+  });
+
+  const { isEngaged, ...divHandlers } = useFileDropZone(onAddFiles);
+
+  return {
+    files,
+    filesWithInfo,
+    chatIsLoading,
+    setFiles,
+    sendMsg,
+    sendingMsg,
+    setSendingMsg,
+    setScrollRef,
+    setCurrentMessage,
+    onAddFiles,
+    getCurrentMessage,
+    handleOnPaste,
+    divHandlers,
+    isEngaged,
+    convertDocsToMarkdown,
+    setConvertDocsToMarkdown,
+    convertingDocumentName,
+  };
+};

package/client/src/components/Checkbox.css

@@ -0,0 +1,24 @@
+.checkbox input:checked {
+  /* background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E"); */
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.Checkbox_inner_label {
+  outline-color: var(--focus-color);
+}
+
+.checkbox {
+  align-items: center;
+}
+
+.checkbox * {
+  cursor: pointer;
+}
+
+.checkbox label {
+  margin-left: 0.5em;
+}

package/client/src/components/Checkbox.tsx

@@ -0,0 +1,152 @@
+import { mdiCheckBold, mdiCheckboxBlankOutline } from "@mdi/js";
+import React from "react";
+import type { TestSelectors } from "../Testing";
+import "./Checkbox.css";
+import { classOverride } from "./Flex";
+import { Icon } from "./Icon/Icon";
+import { generateUniqueID } from "./FileInput/FileInput";
+
+type P = TestSelectors & {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  inputClassname?: string;
+  checked?: boolean;
+  label?: React.ReactNode;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => any;
+  readOnly?: boolean;
+  title?: string;
+  variant?: "minimal" | "micro" | "button" | "header";
+  disabledInfo?: string;
+  iconPath?: string;
+};
+
+export const Checkbox = (props: P) => {
+  const {
+    id,
+    className = "",
+    inputClassname = "",
+    label,
+    checked,
+    style = {},
+    onChange,
+    readOnly,
+    title,
+    variant,
+    disabledInfo,
+    iconPath,
+    ...testSel
+  } = props;
+
+  const idRef = React.useRef(id ?? generateUniqueID());
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  const isBtn = variant === "button";
+  const isMiniOrMicro = variant === "minimal" || variant === "micro";
+  const tickColorClass = checked ? " text-action " : "text-2";
+
+  const defaultInputClass =
+    " Checkbox_inner_label flex-row-wrap noselect relative checkbox pointer ai-center jc-center w-fit w-fit h-fit formfield-bg-color " +
+    (!variant ? " b b-color " : "") +
+    (variant === "minimal" ? " round " : " ") +
+    (isBtn ? "bg-color-2 b-color p-p5 no-outline"
+    : isMiniOrMicro ? "bg-transparent b-unset no-outline"
+    : "relative ");
+  const checkbox = (
+    <div
+      className={classOverride(defaultInputClass, inputClassname)}
+      tabIndex={0}
+      style={
+        variant ?
+          {}
+        : {
+            padding: "3px",
+            borderRadius: "var(--rounded)",
+          }
+      }
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          inputRef.current?.click();
+        }
+      }}
+    >
+      <input
+        id={idRef.current}
+        ref={inputRef}
+        style={{
+          opacity: 0,
+          position: "absolute",
+          width: 0,
+          height: 0,
+        }}
+        type="checkbox"
+        checked={checked}
+        onChange={
+          !onChange || disabledInfo ? undefined : (
+            (e) => {
+              onChange(e, e.target.checked);
+            }
+          )
+        }
+        readOnly={readOnly || Boolean(disabledInfo) || !onChange}
+      />
+      <Icon
+        path={
+          iconPath ??
+          (variant === "header" && !checked ?
+            mdiCheckboxBlankOutline
+          : mdiCheckBold)
+        }
+        size={
+          variant === "button" ? 1
+          : variant === "minimal" ?
+            1
+          : 0.75
+        }
+        className={
+          isMiniOrMicro || isBtn || variant === "header" ?
+            tickColorClass
+          : "text-action"
+        }
+        style={
+          isMiniOrMicro || isBtn || variant === "header" ?
+            {}
+          : {
+              opacity: checked ? 1 : 0,
+            }
+        }
+      />
+    </div>
+  );
+
+  return (
+    <label
+      style={{
+        ...style,
+        ...(isMiniOrMicro ?
+          {
+            background: "transparent",
+            outline: "none !important",
+          }
+        : {}),
+      }}
+      htmlFor={id}
+      className={classOverride(
+        "Checkbox flex-row-wrap ai-center pointer w-fit h-fit " +
+          (disabledInfo ? " disabled " : ""),
+        className,
+      )}
+      title={disabledInfo ?? title}
+      {...testSel}
+    >
+      {checkbox}
+      {!label ? null : (
+        <div
+          className={`ml-1 noselect f-1 text-ellipsis ${variant === "header" ? "text-0" : tickColorClass} ${isMiniOrMicro ? "ml-p25" : "ml-p5"}`}
+        >
+          {label}
+        </div>
+      )}
+    </label>
+  );
+};

package/client/src/components/Chip.css

@@ -0,0 +1,78 @@
+.chip {
+  color-scheme: light dark;
+
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+
+  align-items: center;
+  border-radius: 1em;
+  white-space: nowrap;
+
+  width: fit-content;
+  height: fit-content;
+  text-align: start;
+}
+
+.chip.lg {
+  font-size: 1em;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+}
+
+.chip.green {
+  color: var(--green-500);
+}
+.chip.variant-naked {
+  gap: 4px;
+}
+.chip.variant-default,
+.chip.variant-outline {
+  background-color: var(--bg-color-1);
+}
+.chip.variant-outline {
+  border: 1px solid var(--text-2);
+}
+
+.chip.green.variant-default,
+.chip.green.variant-outline {
+  background-color: #00c87047;
+}
+.chip.yellow {
+  color: var(--yellow);
+}
+.chip.yellow.variant-default,
+.chip.yellow.variant-outline {
+  background-color: var(--yellow-100);
+}
+
+.chip.orange {
+  color: light-dark(#c67108, #f49826ab);
+}
+.chip.orange.variant-default,
+.chip.orange.variant-outline {
+  background-color: #f38f1354; /* #ffe699; */
+}
+
+.chip.red {
+  color: var(--red-500);
+}
+.chip.red.variant-default,
+.chip.red.variant-outline {
+  background-color: var(--red-100);
+}
+.chip.gray.variant-default,
+.chip.gray.variant-outline {
+  background-color: var(--bg-color-1);
+}
+.chip.blue {
+  color: var(--blue-500);
+}
+.chip.blue.variant-default,
+.chip.blue.variant-outline {
+  background-color: light-dark(var(--blue-100), #00448fd4);
+}

package/client/src/components/Chip.tsx

@@ -0,0 +1,150 @@
+import { mdiClose } from "@mdi/js";
+import React from "react";
+import "./Animations.css";
+import "./Chip.css";
+import Btn from "./Btn";
+import { FlexCol, classOverride } from "./Flex";
+import { Icon } from "./Icon/Icon";
+import type { TestSelectors } from "../Testing";
+
+type ChipProps = TestSelectors &
+  Omit<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "children" | "color"
+  > & {
+    label?: string;
+    subValues?: (string | number)[];
+    variant?: "naked" | "header" | "outline" | "default";
+    color?: "blue" | "yellow" | "red" | "green" | "gray" | "orange";
+    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    leftIcon?: {
+      path: string;
+      size?: 0.75 | 0.5;
+      onClick?: React.MouseEventHandler<HTMLButtonElement>;
+      style?: React.CSSProperties;
+      className?: string;
+    };
+  } & (
+    | { value?: string | number; children?: undefined }
+    | { children: React.ReactNode }
+  );
+
+export default class Chip extends React.Component<ChipProps> {
+  render() {
+    const {
+      className = "",
+      subValues,
+      label,
+      variant = "default",
+      onDelete,
+      leftIcon,
+      color = "gray",
+      ...divProps
+    } = this.props;
+
+    const asHeader = variant === "header";
+    const labelNode =
+      typeof label !== "string" ? null : (
+        <span
+          className={"text-1 "}
+          style={
+            asHeader ?
+              { fontSize: "14px", fontWeight: 400 }
+            : { fontWeight: 400 }
+          }
+        >
+          {label}:{" "}
+        </span>
+      );
+    return (
+      <div
+        {...divProps}
+        style={{
+          ...(!asHeader && {
+            padding: "6px 12px",
+            ...(onDelete && {
+              paddingLeft: "12px",
+            }),
+          }),
+          ...this.props.style,
+        }}
+        className={classOverride(
+          `chip-component flex-row ws-pre-wrap ai-center chip min-w-0 lg ${color} variant-${variant} ${variant === "default" ? "gap-p25" : ""} ${asHeader ? "text-ellipsis" : ""}`,
+          className,
+        )}
+      >
+        {leftIcon ?
+          leftIcon.onClick ?
+            <Btn
+              iconPath={leftIcon.path}
+              onClick={leftIcon.onClick}
+              className={classOverride("round f-0", leftIcon.className)}
+              size="default"
+              style={{
+                padding: 0,
+                background: "transparent",
+                color: "black",
+                ...leftIcon.style,
+              }}
+              variant="filled"
+            />
+          : <Icon
+              path={leftIcon.path}
+              className={classOverride("round f-0", leftIcon.className)}
+              size={leftIcon.size ?? 1}
+              style={leftIcon.style}
+            />
+
+        : null}
+
+        {!asHeader && labelNode}
+
+        <FlexCol className={`gap-p25 min-w-0`}>
+          {asHeader && labelNode}
+          {"value" in this.props && this.props.value ?
+            <span
+              className="font-medium f-1 text-ellipsis"
+              style={{ padding: "2px" }}
+            >
+              {this.props.value}
+            </span>
+          : asHeader ?
+            <div className="text-ellipsis">{this.props.children}</div>
+          : this.props.children}
+          {!!subValues?.length &&
+            subValues.map((subValue, i) => (
+              <span
+                key={i}
+                className=" f-1 text-ellipsis"
+                style={{ opacity: 0.7, padding: "2px" }}
+              >
+                {subValue}
+              </span>
+            ))}
+        </FlexCol>
+
+        {onDelete && (
+          <Btn
+            iconPath={mdiClose}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onDelete(e);
+            }}
+            className="Chip_DeleteBtn ml-p5 round as-start text-1"
+            size="default"
+            style={{
+              padding: 0,
+              borderRadius: "1000%",
+              background: "transparent",
+            }}
+            color="action"
+          />
+        )}
+      </div>
+    );
+  }
+}

package/client/src/components/ClickCatch.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+type P = Pick<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  | "style"
+  | "className"
+  | "onClick"
+  | "onPointerUp"
+  | "onPointerDown"
+  | "children"
+>;
+
+export default class ClickCatch extends React.Component<P, any> {
+  clickCatch?: HTMLDivElement;
+
+  render() {
+    const { children, style, onClick, ...otherProps } = this.props;
+    return (
+      <div
+        style={{
+          display: "block",
+          position: "fixed",
+          backgroundColor: "rgb(0 0 0 / .5)",
+          zIndex: 0,
+          ...style,
+        }}
+        className={"clickcatchcomp fixed noselect inset-0 w-full h-full"}
+        ref={(e) => {
+          if (e) this.clickCatch = e;
+        }}
+        onClick={(e) => {
+          if (e.target === this.clickCatch) {
+            onClick?.(e);
+          }
+        }}
+        {...otherProps}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          if (e.target === this.clickCatch) {
+            onClick?.(e);
+          }
+          return false;
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+}

package/client/src/components/ClickCatchOverlay.css

@@ -0,0 +1,7 @@
+.ClickCatchOverlay {
+  background: #2c2c2c6b;
+}
+
+.dark-theme .ClickCatchOverlay {
+  background: #0000002e;
+}

package/client/src/components/ClickCatchOverlay.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import "./ClickCatchOverlay.css";
+import { type DivProps, classOverride } from "./Flex";
+import type { Command } from "../Testing";
+
+/**
+ * Must be avove table fixed column
+ */
+export const ClickCatchOverlayZIndex = 5;
+
+export const ClickCatchOverlay = ({
+  style,
+  className,
+  onClick,
+}: Pick<DivProps, "onClick" | "style" | "className">) => {
+  return (
+    <div
+      data-command={"ClickCatchOverlay" satisfies Command}
+      className={classOverride("ClickCatchOverlay", className)}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: ClickCatchOverlayZIndex,
+        backdropFilter: "blur(2px)",
+        ...style,
+      }}
+      onClick={onClick}
+    />
+  );
+};

package/client/src/components/CodeFileBrowser/CodeFileBrowser.tsx

@@ -0,0 +1,85 @@
+import { FILE_EXTENSION_TO_ICON_INFO } from "@components/FileTree/FILE_EXTENSION_TO_ICON_INFO";
+import { FlexRow } from "@components/Flex";
+import { MenuList } from "@components/MenuList";
+import { MONACO_READONLY_DEFAULT_OPTIONS } from "@components/MonacoEditor/MonacoEditor";
+import { mdiText } from "@mdi/js";
+import React, { useMemo, useState } from "react";
+import type { LanguageConfig } from "src/dashboard/CodeEditor/CodeEditor";
+import { CodeEditorWithSaveButton } from "src/dashboard/CodeEditor/CodeEditorWithSaveButton";
+
+export const CodeFileBrowser = ({
+  files,
+  onChange,
+  modelsGroupId,
+  projectPath,
+}: {
+  /**
+   * Used as modelId prefix for Monaco editor to ensure it doesn't show stale content from other renders
+   */
+  modelsGroupId: string;
+  files: Record<string, string>;
+  onChange: (newFile: {
+    fileName: string;
+    content: string;
+  }) => void | Promise<void>;
+  projectPath?: string;
+}) => {
+  const [activeFilePath, setActiveFilePath] = useState(Object.keys(files)[0]);
+  const activeContent = activeFilePath ? (files[activeFilePath] ?? "") : "";
+  const extension = activeFilePath?.toLowerCase().split(".").at(-1) ?? "txt";
+  const language = useMemo(() => {
+    if (extension === "ts") {
+      return {
+        lang: "typescript",
+        environment: "nodejs",
+        modelFileName: modelsGroupId + (activeFilePath ?? "file.ts"),
+        projectPath,
+      } as const satisfies LanguageConfig;
+    }
+    return FILE_EXTENSION_TO_ICON_INFO[extension]?.label ?? "plaintext";
+  }, [activeFilePath, extension, modelsGroupId, projectPath]);
+  return (
+    <FlexRow className="min-w-0 min-h-0 ai-start gap-0 w-full max-w-full f-1">
+      <MenuList
+        activeKey={activeFilePath}
+        items={Object.keys(files).map((filePath) => {
+          const ext = filePath.toLowerCase().split(".").pop() ?? "txt";
+          return {
+            key: filePath,
+            label: filePath,
+            leftIconPath: FILE_EXTENSION_TO_ICON_INFO[ext]?.iconPath ?? mdiText,
+            iconStyle: { opacity: 0.7 },
+            onPress: () => {
+              setActiveFilePath(filePath);
+            },
+          };
+        })}
+        variant="vertical"
+        className="pointer bg-color-1 rounded-none"
+        style={{ alignSelf: "stretch", fontSize: 14 }}
+      />
+      <FlexRow className="o-auto f-1 w-full h-full ai-start">
+        {activeFilePath && (
+          <CodeEditorWithSaveButton
+            key={activeFilePath}
+            className="f-1 h-full"
+            language={language}
+            label=""
+            value={activeContent}
+            // style={{ width: "min(600px, 100%)", minHeight: 200 }}
+            onSave={async (newValue) => {
+              await onChange({ fileName: activeFilePath, content: newValue });
+            }}
+            options={monacoOptions}
+          />
+        )}
+      </FlexRow>
+    </FlexRow>
+  );
+};
+
+const monacoOptions = {
+  ...MONACO_READONLY_DEFAULT_OPTIONS,
+  readOnly: false,
+  lineNumbers: "on",
+} as const;