@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/ui/ItemList.tsx

@@ -0,0 +1,76 @@
+import { ResultItem } from "./ItemSearch";
+import { ItemDescriptor } from "../pageModel";
+
+interface ItemListProps {
+  items: ResultItem[];
+  onItemHover?: (item: ResultItem | undefined) => void;
+  onItemClick: (
+    item: ItemDescriptor & { path?: string; idPath?: string; icon?: string },
+  ) => void;
+  maxItems?: number;
+  className?: string;
+  showPath?: boolean;
+}
+
+export const ItemList: React.FC<ItemListProps> = ({
+  items,
+  onItemHover,
+  onItemClick,
+  maxItems = 6,
+  className = "",
+  showPath = true,
+}) => {
+  const filteredItems = items.filter((x) => x.language).slice(0, maxItems);
+
+  const handleItemClick = (item: ResultItem) => {
+    onItemClick({
+      id: item.id,
+      language: item.language,
+      version: 0,
+      path: item.path,
+      icon: item.icon,
+      idPath: item.idPath,
+    });
+  };
+
+  if (filteredItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`flex flex-1 flex-col gap-1 overflow-y-auto ${className}`}>
+      {filteredItems.map((item) => (
+        <div
+          key={item.id + item.language}
+          className="flex cursor-pointer items-start gap-2 rounded p-1 text-xs hover:bg-gray-50"
+          onMouseEnter={() => onItemHover?.(item)}
+          onMouseLeave={() => onItemHover?.(undefined)}
+          onClick={() => handleItemClick(item)}
+        >
+          {item.icon && (
+            <img
+              src={item.icon}
+              width="16"
+              height="16"
+              className="mt-0.5 flex-shrink-0"
+            />
+          )}
+
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <div className="truncate font-medium text-gray-900">
+              {item.name}
+              <span className="text-2xs ml-1 text-gray-400">
+                ({item.language})
+              </span>
+            </div>
+            {showPath && (
+              <div className="text-2xs break-words text-gray-500">
+                {item.path}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -0,0 +1,118 @@
+import { Dialog } from "primereact/dialog";
+
+import { useEffect, useRef, useState } from "react";
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+import { InputText } from "primereact/inputtext";
+import { DialogProps } from "../client/editContext";
+import { ItemDescriptor } from "../pageModel";
+import { useEditContext } from "../client/editContext";
+import { getChildren } from "../services/contentService";
+import { useDebouncedCallback } from "use-debounce";
+
+export type ItemNameDialogProps = {
+  name?: string;
+  title?: string;
+  message?: string;
+  parentItem?: ItemDescriptor;
+  itemId?: string;
+};
+
+export function ItemNameDialog(
+  props: ItemNameDialogProps & DialogProps<string>,
+) {
+  const editContext = useEditContext();
+  const [name, setName] = useState("");
+  const [validationError, setValidationError] = useState<string>();
+  const [isValid, setIsValid] = useState(false);
+
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setName(props?.name || "");
+  }, [props]);
+
+  const checkNameValidDebounced = useDebouncedCallback(
+    async () => checkName(),
+    500,
+  );
+
+  useEffect(() => {
+    checkNameValidDebounced();
+  }, [name]);
+
+  const checkName = async () => {
+    let valid = name.trim().length > 0;
+
+    if (!props.parentItem) {
+      setIsValid(valid);
+      setValidationError(valid ? undefined : "Name is required");
+      return;
+    }
+
+    if (valid) {
+      const children = await getChildren(
+        props.parentItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        props.parentItem?.language || "en",
+      );
+      if (
+        children.find(
+          (x) =>
+            x.name.toLocaleLowerCase() === name.trim().toLocaleLowerCase() &&
+            (props.itemId ? x.id !== props.itemId : true),
+        )
+      ) {
+        valid = false;
+        setValidationError("A page with this name already exists.");
+      }
+    }
+
+    if (valid) setValidationError(undefined);
+    setIsValid(valid);
+    return valid;
+  };
+
+  const handleOk = () => {
+    props.onClose?.(name);
+  };
+
+  return (
+    <Dialog
+      visible={true}
+      onHide={() => {
+        props.onClose?.(null);
+      }}
+      onShow={() => {
+        nameRef.current?.focus();
+        nameRef.current?.select();
+      }}
+      style={{ width: "400px" }}
+      header={props?.title ?? "Name"}
+    >
+      <div className="p-3">
+        <div className="my-2 text-sm">
+          {props.message || "Enter a name for the new item:"}
+        </div>
+        <InputText
+          ref={nameRef}
+          value={name}
+          className="w-full"
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(ev) => {
+            if (ev.key === "Enter" && isValid) handleOk();
+          }}
+        />
+        {validationError && (
+          <div className="mt-2 text-red-500">{validationError}</div>
+        )}
+      </div>
+      <DialogButtons>
+        <Button onClick={handleOk} label="Ok" disabled={!isValid} />
+        <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+      </DialogButtons>
+    </Dialog>
+  );
+}

package/src/editor/ui/ItemSearch.tsx

@@ -0,0 +1,159 @@
+import { InputText } from "primereact/inputtext";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { executeSearch } from "../services/aiService";
+import { useDebouncedCallback } from "use-debounce";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { ItemDescriptor } from "../pageModel";
+import { getItemDescriptor } from "../utils";
+import { ItemList } from "./ItemList";
+
+export type ResultItem = {
+  id: string;
+  name: string;
+  language: string;
+  icon?: string;
+  path: string;
+  idPath?: string;
+};
+
+interface SearchProps {
+  rootItemIds?: string[];
+  setHoveredItem?: React.Dispatch<React.SetStateAction<ResultItem | undefined>>;
+  itemSelected: (
+    item: ItemDescriptor & { path?: string; idPath?: string; icon?: string },
+  ) => void;
+  language?: string;
+  resultClassName?: string;
+  autoFocus?: boolean;
+}
+
+export const ItemSearch: React.FC<SearchProps> = ({
+  rootItemIds,
+  setHoveredItem,
+  itemSelected,
+  language,
+  resultClassName,
+  autoFocus = false,
+}) => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<ResultItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const editContext = useEditContext();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
+    if (!editContext) return;
+
+    setLoading(true);
+    const currentQuery = searchPrompt;
+
+    const guidPattern =
+      /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+    if (guidPattern.test(searchPrompt)) {
+      const item = await editContext.itemsRepository.getItem({
+        id: searchPrompt,
+        language: language || "en",
+        version: 0,
+      });
+      if (item) {
+        if (query === currentQuery) {
+          const resultItem: ResultItem = {
+            id: item.id,
+            name: item.name,
+            language: item.language || language || "en",
+            icon: item.icon,
+            path: item.path || item.name,
+            idPath: item.idPath,
+          };
+          setResults([resultItem]);
+        }
+      } else {
+        if (query === currentQuery) {
+          setResults([]);
+        }
+      }
+      setLoading(false);
+      return;
+    }
+
+    const result = await executeSearch({
+      index: "master",
+      query: searchPrompt,
+      editContext,
+      rootItemIds,
+      maxResults: 5,
+    });
+
+    if (query === currentQuery) {
+      if (result.type == "success") {
+        setResults(() => result.data as ResultItem[]);
+      } else {
+        editContext.showToast({
+          severity: "error",
+          summary: "Error searching",
+          detail: result.response.statusText,
+        });
+      }
+    }
+    setLoading(false);
+  }, 600);
+
+  useEffect(() => {
+    if (query) {
+      setLoading(true);
+      handleSearch(query);
+    } else {
+      setResults([]);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    if (inputRef.current && autoFocus) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="relative">
+        <div className="flex items-center">
+          <InputText
+            className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
+            onChange={(e) => setQuery(e.target.value)}
+            value={query}
+            ref={inputRef}
+          />
+          {!loading && !query && (
+            <i className="pi pi-search px-3 text-gray-500" />
+          )}
+          {!loading && query && (
+            <i
+              className="pi pi-times cursor-pointer px-3 text-gray-500"
+              onClick={() => setQuery("")}
+            />
+          )}
+          {loading && (
+            <ProgressSpinner
+              style={{ width: "24px", height: "24px", margin: "0 12px" }}
+            />
+          )}
+        </div>
+      </div>
+      {results.length > 0 && (
+        <ItemList
+          items={results}
+          onItemHover={setHoveredItem}
+          onItemClick={itemSelected}
+          maxItems={6}
+          className={`mt-1 ${resultClassName}`}
+        />
+      )}
+      {results.length === 0 && !loading && query && (
+        <div className="mt-1 text-xs text-gray-500">No results found</div>
+      )}
+    </>
+  );
+};
+
+export default ItemSearch;