@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/media-selector/AiImageSearch.tsx

@@ -1,185 +0,0 @@
-import { useEffect, useState, useRef } from "react";
-
-import { useDebouncedCallback } from "use-debounce";
-import { createEditorAiContext } from "../ai/editorAiContext";
-import { executePrompt, executeSearch } from "../services/aiService";
-import { useEditContext } from "../client/editContext";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { InputText } from "primereact/inputtext";
-import { Thumbnail, Thumbnails } from "./Thumbnails";
-import { Splitter, SplitterPanel } from "primereact/splitter";
-import { Preview } from "./Preview";
-import DialogButtons from "../ui/DialogButtons";
-import { Button } from "primereact/button";
-
-export function AiImageSearch({
-  onMediaSelected,
-  onHide,
-}: {
-  onMediaSelected: (mediaId: string) => void;
-  onHide: () => void;
-}) {
-  const [prompt, setPrompt] = useState("");
-  const [loadingPrompt, setLoadingPrompt] = useState(false);
-  const [loadingThumbnails, setLoadingThumbnails] = useState(false);
-  const [images, setImages] = useState<Thumbnail[]>([]);
-  const [selectedImage, setSelectedImage] = useState<Thumbnail>();
-  const editContext = useEditContext();
-  const currentSuggestionRequest = useRef<AbortController | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    suggestPrompt();
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-
-  const suggestPrompt = async () => {
-    if (editContext) {
-      setPrompt("");
-      setLoadingPrompt(true);
-
-      if (currentSuggestionRequest.current) {
-        currentSuggestionRequest.current.abort();
-      }
-
-      const abortController = new AbortController();
-      currentSuggestionRequest.current = abortController;
-
-      try {
-        const result = await executePrompt(
-          [
-            {
-              content:
-                "Please extract search terms from the field context that can be used to find a matching image. " +
-                "I will use the search terms to find an image and populate the image field. If the component does not provide enough context, " +
-                "also get content from the parent component using the get-content function. " +
-                "Do not consider current image field contents. " +
-                "Reply with search terms only!",
-              name: "user",
-              role: "user",
-            },
-          ],
-          editContext,
-          createEditorAiContext,
-          { allowedFunctions: ["get-content"], addContextContent: true },
-          { signal: abortController.signal },
-        );
-
-        setLoadingPrompt(false);
-        const newPrompt = result.responseText.replaceAll("\n", "");
-        setPrompt(newPrompt);
-      } catch (error) {
-        if (error instanceof Error && error.name !== "AbortError") {
-          console.error("Failed to fetch prompt:", error);
-        }
-        setLoadingPrompt(false);
-      } finally {
-        currentSuggestionRequest.current = null;
-      }
-    }
-  };
-
-  const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
-    if (!editContext) return;
-    setLoadingThumbnails(true);
-    const result = await executeSearch({
-      query: searchPrompt,
-      editContext,
-      maxResults: 50,
-      index: "media",
-      skipValidation: true,
-    });
-    if (result.type == "success") {
-      setImages(result.data as Thumbnail[]);
-    } else {
-      editContext.showToast({
-        severity: "error",
-        summary: "Error searching",
-        detail: result.response.statusText,
-      });
-    }
-    setLoadingThumbnails(false);
-  }, 300);
-
-  const onPromptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newPrompt = e.target.value;
-    setPrompt(newPrompt);
-    if (currentSuggestionRequest.current) {
-      currentSuggestionRequest.current.abort();
-    }
-  };
-
-  useEffect(() => {
-    if (prompt) {
-      handleSearch(prompt);
-    }
-  }, [prompt]);
-
-  return (
-    <>
-      <Splitter className="flex-1 border-0">
-        <SplitterPanel size={50} className="flex flex-col pt-4">
-          <div className="flex flex-1 flex-col gap-2 px-2 pt-2 text-sm">
-            <div>
-              Search prompt
-              <div className="flex items-center gap-2">
-                <InputText
-                  ref={inputRef} // Add ref to InputText
-                  value={prompt}
-                  onChange={onPromptChange}
-                  className="flex-1"
-                />
-                {loadingPrompt && (
-                  <div className="flex h-10 items-center">
-                    <ProgressSpinner
-                      style={{ width: "24px", height: "24px" }}
-                    />
-                  </div>
-                )}
-                {!loadingPrompt && (
-                  <Button
-                    icon="pi pi-sparkles"
-                    onClick={() => suggestPrompt()}
-                    label="Suggest"
-                    size="small"
-                  />
-                )}
-              </div>
-            </div>
-            <div className="relative flex-1">
-              {loadingThumbnails && (
-                <div className="flex h-full items-center">
-                  <ProgressSpinner style={{ width: "24px", height: "24px" }} />
-                </div>
-              )}
-              <Thumbnails
-                images={images}
-                selectedImage={selectedImage}
-                setSelectedImage={setSelectedImage}
-                onMediaSelected={onMediaSelected}
-                onHide={onHide}
-              />
-            </div>
-          </div>
-        </SplitterPanel>
-        <SplitterPanel size={50} className="relative">
-          <Preview selectedImage={selectedImage} />
-        </SplitterPanel>
-      </Splitter>
-      <DialogButtons>
-        <Button
-          disabled={!selectedImage}
-          onClick={() => {
-            onMediaSelected(selectedImage!.id);
-            onHide();
-          }}
-        >
-          Select
-        </Button>
-        <Button onClick={() => onHide()}>Cancel</Button>
-      </DialogButtons>
-    </>
-  );
-}

package/src/editor/media-selector/AiImageSearchPrompt.tsx

@@ -1,94 +0,0 @@
-import { Button } from "primereact/button";
-import { InputText } from "primereact/inputtext";
-import { useEffect, useRef, useState } from "react";
-import { useEditContext } from "../client/editContext";
-import { executePrompt } from "../services/aiService";
-import { createEditorAiContext } from "../ai/editorAiContext";
-import { ProgressSpinner } from "primereact/progressspinner";
-
-export function AiImageSearchPrompt({
-  onSearchPromptChange,
-}: {
-  onSearchPromptChange: (prompt: string) => void;
-}) {
-  const editContext = useEditContext();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [prompt, setPrompt] = useState("");
-  const [loadingPrompt, setLoadingPrompt] = useState(false);
-  const currentSuggestionRequest = useRef<AbortController | null>(null);
-
-  useEffect(() => {
-    onSearchPromptChange(prompt);
-  }, [prompt]);
-
-  const suggestPrompt = async () => {
-    if (editContext) {
-      setPrompt("");
-      setLoadingPrompt(true);
-
-      if (currentSuggestionRequest.current) {
-        currentSuggestionRequest.current.abort();
-      }
-
-      const abortController = new AbortController();
-      currentSuggestionRequest.current = abortController;
-
-      try {
-        const result = await executePrompt(
-          [
-            {
-              content:
-                "Please extract search terms from the field context that can be used to find a matching image. " +
-                "I will use the search terms to find an image and populate the image field. If the component does not provide enough context, " +
-                "also get content from the parent component using the get-content function. " +
-                "Do not consider current image field contents. " +
-                "Reply with search terms only!",
-              name: "user",
-              role: "user",
-            },
-          ],
-          editContext,
-          createEditorAiContext,
-          { allowedFunctions: ["get-content"], addContextContent: true },
-          { signal: abortController.signal },
-        );
-
-        setLoadingPrompt(false);
-        const newPrompt = result.responseText.replaceAll("\n", "");
-        setPrompt(newPrompt);
-      } catch (error) {
-        if (error instanceof Error && error.name !== "AbortError") {
-          console.error("Failed to fetch prompt:", error);
-        }
-        setLoadingPrompt(false);
-      } finally {
-        currentSuggestionRequest.current = null;
-      }
-    }
-  };
-
-  return (
-    <div className="m-2 flex items-center gap-2">
-      <i className="pi pi-search text-gray-500" />
-      <InputText
-        ref={inputRef} // Add ref to InputText
-        value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
-        className="flex-1"
-      />
-      {loadingPrompt && (
-        <div className="flex h-10 items-center">
-          <ProgressSpinner style={{ width: "24px", height: "24px" }} />
-        </div>
-      )}
-      {!loadingPrompt && (
-        <Button
-          icon="pi pi-sparkles"
-          onClick={() => suggestPrompt()}
-          label="Suggest"
-          size="small"
-        />
-      )}
-    </div>
-  );
-}

package/src/editor/media-selector/MediaSelector.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { Dialog } from "primereact/dialog";
-import { TreeSelector } from "./TreeSelector";
-
-export type MediaSelectorMode = "images" | "video";
-
-export const MediaSelector = ({
-  visible,
-  onHide,
-  onMediaSelected,
-  selectedIdPath,
-  mode,
-  language,
-}: {
-  visible: boolean;
-  mode: MediaSelectorMode;
-  onHide: () => void;
-  onMediaSelected: (mediaId: string) => void;
-  selectedIdPath?: string;
-  language: string;
-}) => {
-  return (
-    <Dialog
-      style={{ width: "80%", height: "80%" }}
-      visible={visible}
-      onHide={onHide}
-      header={mode === "video" ? "Select Video" : "Select Image"}
-      data-testid="media-selector-dialog"
-    >
-      <div className="flex flex-col h-full ">
-        <TreeSelector
-          language={language}
-          selectedIdPath={selectedIdPath}
-          onHide={onHide}
-          onMediaSelected={onMediaSelected}
-          mode={mode === "video" ? "video" : "image"}
-        />
-      </div>
-    </Dialog>
-  );
-};

package/src/editor/media-selector/Preview.tsx

@@ -1,14 +0,0 @@
-import { Thumbnail } from "./Thumbnails";
-
-export function Preview({ selectedImage }: { selectedImage?: Thumbnail }) {
-  if (!selectedImage) return null;
-  return (
-    <div className="m-4 flex justify-center align-center absolute inset-0">
-      <img
-        src={selectedImage?.previewUrl}
-        className="object-contain"
-        fetchPriority="high"
-      />
-    </div>
-  );
-}

package/src/editor/media-selector/Thumbnails.tsx

@@ -1,48 +0,0 @@
-import { classNames } from "primereact/utils";
-
-export type Thumbnail = {
-  id: string;
-  name: string;
-  thumbUrl: string;
-  previewUrl: string;
-};
-
-export function Thumbnails({
-  images,
-  selectedImage,
-  setSelectedImage,
-  onMediaSelected,
-  onHide,
-}: {
-  images: Thumbnail[];
-  selectedImage: Thumbnail | undefined;
-  setSelectedImage: (image: Thumbnail) => void;
-  onMediaSelected: (imageId: string) => void;
-  onHide: () => void;
-}) {
-  return (
-    <div className="flex flex-col absolute inset-0 overflow-auto p-2">
-      <div className="flex flex-wrap content-start items-start gap-2">
-        {images?.map((t) => (
-          <div
-            key={t.id}
-            className={classNames(
-              selectedImage?.id == t.id ? "shadow-md" : "",
-              "w-24 flex flex-col justify-between hover:shadow-md cursor-pointer p-1"
-            )}
-            onDoubleClick={() => {
-              onMediaSelected(t.id);
-              onHide();
-            }}
-            onClick={() => setSelectedImage(t)}
-          >
-            <div className="h-24 w-24 flex justify-center items-center">
-              <img src={t.thumbUrl} />
-            </div>
-            <div className="text-xs break-all">{t.name}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/editor/media-selector/TreeSelector.tsx

@@ -1,292 +0,0 @@
-"use client";
-
-import ContentTree from "../ContentTree";
-import { Splitter, SplitterPanel } from "primereact/splitter";
-import { useEffect, useState } from "react";
-import { ItemTreeNodeData, getChildren } from "../services/contentService";
-import { useEditContext } from "../client/editContext";
-import { Button } from "primereact/button";
-import { executeSearch } from "../services/aiService";
-import { FileUpload } from "primereact/fileupload";
-
-import DialogButtons from "../ui/DialogButtons";
-import { ArrowDownIcon } from "../ui/Icons";
-import { Thumbnail, Thumbnails } from "./Thumbnails";
-import { Preview } from "./Preview";
-import { UploadZone } from "./UploadZone";
-import { AiImageSearchPrompt } from "./AiImageSearchPrompt";
-import { useDebouncedCallback } from "use-debounce";
-import { ProgressSpinner } from "primereact/progressspinner";
-
-type MediaHistoryEntry = {
-  name: string;
-  id: string;
-  idPath: string;
-};
-
-export const TreeSelector = ({
-  onHide,
-  onMediaSelected,
-  selectedIdPath,
-  language,
-  mode,
-}: {
-  onHide: () => void;
-  onMediaSelected: (mediaId: string) => void;
-  selectedIdPath?: string;
-  language: string;
-  mode: "image" | "video";
-}) => {
-  const [selectedFolderId, setSelectedFolderId] = useState<string>();
-  const [images, setImages] = useState<Thumbnail[]>();
-  const [selectedImage, setSelectedImage] = useState<Thumbnail>();
-  const [selectedImageId, setSelectedImageId] = useState<string>();
-  const [expandedIdPath, setExpandedIdPath] = useState<string>();
-  const [searchPrompt, setSearchPrompt] = useState<string>();
-  const [loadingThumbnails, setLoadingThumbnails] = useState(false);
-
-  const selection = selectedFolderId ? [selectedFolderId] : [];
-  const editContext = useEditContext();
-
-  const [history, setHistory] = useState<MediaHistoryEntry[]>(() => {
-    const savedHistory = localStorage.getItem("editor.mediahistory");
-    return savedHistory ? JSON.parse(savedHistory) : [];
-  });
-
-  useEffect(() => {
-    if (selectedIdPath) {
-      const path = selectedIdPath.split("/");
-      if (path.length > 1) {
-        setSelectedFolderId(path[path.length - 2]);
-        setSelectedImageId(
-          path[path.length - 1]?.toLowerCase().substring(1, 37),
-        );
-      }
-      setExpandedIdPath(selectedIdPath);
-    }
-    if (!selectedIdPath) {
-      setExpandedIdPath(history[0]?.idPath);
-      setSelectedFolderId(history[0]?.id);
-      setSelectedImageId(undefined);
-    }
-  }, [selectedIdPath]);
-
-  useEffect(() => {
-    loadThumbnailsAndSelectImage();
-  }, [selectedFolderId]);
-
-  const updateHistory = async () => {
-    if (!selectedFolderId) return;
-    const item = await editContext?.itemsRepository.getItem({
-      id: selectedFolderId,
-      language: "en",
-      version: 0,
-    });
-
-    setHistory((history: MediaHistoryEntry[]) => {
-      if (!item?.idPath || !item.name) return history;
-
-      const newEntry: MediaHistoryEntry = {
-        name: item.name,
-        id: item.id,
-        idPath: item?.idPath,
-      };
-
-      const newHistory = [
-        newEntry,
-        ...history.filter((x) => x.idPath !== newEntry.idPath).slice(0, 4),
-      ];
-
-      if (typeof window !== "undefined")
-        localStorage.setItem("editor.mediahistory", JSON.stringify(newHistory));
-
-      return newHistory;
-    });
-  };
-
-  async function loadThumbnailsAndSelectImage() {
-    setSelectedImage(undefined);
-    setImages([]);
-
-    const images = await loadThumbnails(selectedFolderId);
-
-    if (selectedImageId)
-      setSelectedImage(images?.find((x) => x.id === selectedImageId));
-  }
-
-  async function loadThumbnails(selectedFolderId: string | undefined) {
-    if (searchPrompt) {
-      await search(searchPrompt);
-      return;
-    }
-    if (!selectedFolderId) setImages([]);
-    else {
-      setLoadingThumbnails(true);
-      const children = await getChildren(
-        selectedFolderId,
-        editContext!.sessionId,
-        mode === "video"
-          ? [
-              "e76adbdf-87d1-4fcb-ba71-274f7dbf5670",
-              "374d3a99-c098-4cd2-8fbc-dc2d1ca1c904",
-            ]
-          : [
-              "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
-              "F1828A2C-7E5D-4BBD-98CA-320474871548",
-            ],
-        false,
-        language,
-      );
-      setImages(children);
-      setLoadingThumbnails(false);
-
-      return children;
-    }
-  }
-
-  const searchDebounced = useDebouncedCallback(async (searchPrompt: string) => {
-    return search(searchPrompt);
-  }, 300);
-
-  const search = async (searchPrompt: string) => {
-    if (!editContext) return;
-
-    setSearchPrompt(searchPrompt);
-    if (searchPrompt.length == 0) return;
-
-    setLoadingThumbnails(true);
-
-    const result = await executeSearch({
-      query: searchPrompt,
-      rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
-      editContext,
-      maxResults: 50,
-      index: "media",
-      skipValidation: true,
-    });
-    if (result.type == "success") {
-      setImages(result.data as Thumbnail[]);
-    } else {
-      editContext.showToast({
-        severity: "error",
-        summary: "Error searching",
-        detail: result.response.statusText,
-      });
-    }
-    setLoadingThumbnails(false);
-  };
-
-  return (
-    <>
-      <Splitter className="flex-1 border-0">
-        <SplitterPanel size={25} className="flex flex-col">
-          <div className="relative flex-1">
-            <div className="absolute inset-0 overflow-auto p-2">
-              <ContentTree
-                rootItemIds={["3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"]}
-                selectionMode="single"
-                selectedItemIds={selection}
-                templateIds={["FE5DD826-48C6-436D-B87A-7C4210C7413B"]}
-                onItemInserted={(item) => {
-                  setSelectedFolderId(item.id);
-                }}
-                expandIdPath={
-                  expandedIdPath ?? "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"
-                }
-                onSelectionChange={(selection) => {
-                  const selectedNode = selection[0] as ItemTreeNodeData;
-                  if (selectedNode) setSelectedFolderId(selectedNode.id);
-                  else setSelectedFolderId(undefined);
-                }}
-                language={language}
-              />
-            </div>
-          </div>
-          {history.length > 0 && (
-            <div>
-              <div className="my-2 flex items-center gap-1 border-t border-gray-300 px-2 pt-2 text-xs text-gray-500">
-                <ArrowDownIcon /> Recent Locations
-              </div>
-              {history.map((x) => (
-                <div
-                  key={x.idPath}
-                  className="mx-5 flex cursor-pointer gap-1 text-xs hover:text-gray-400"
-                  onClick={() => {
-                    setSelectedFolderId(x.id);
-                    setExpandedIdPath(x.idPath);
-                  }}
-                >
-                  {x.name}
-                </div>
-              ))}
-            </div>
-          )}
-        </SplitterPanel>
-        <SplitterPanel className="relative">
-          <div className="flex h-full w-full flex-col gap-2">
-            <AiImageSearchPrompt onSearchPromptChange={searchDebounced} />
-
-            <div className="relative flex-1">
-              {loadingThumbnails && (
-                <div className="flex h-full items-center">
-                  <ProgressSpinner style={{ width: "24px", height: "24px" }} />
-                </div>
-              )}
-              {!loadingThumbnails && (
-                <Thumbnails
-                  images={images ?? []}
-                  selectedImage={selectedImage}
-                  setSelectedImage={setSelectedImage}
-                  onMediaSelected={() => {
-                    updateHistory();
-                    onMediaSelected(selectedImage!.id);
-                  }}
-                  onHide={onHide}
-                />
-              )}
-            </div>
-            {selectedFolderId && (
-              <UploadZone
-                selectedFolderId={selectedFolderId}
-                uploadCompleted={() => {
-                  loadThumbnailsAndSelectImage();
-                }}
-              />
-            )}
-          </div>
-        </SplitterPanel>
-        <SplitterPanel className="relative">
-          <Preview selectedImage={selectedImage} />
-        </SplitterPanel>
-      </Splitter>
-      <DialogButtons>
-        <FileUpload
-          mode="basic"
-          // disabled={electedFolderId}
-          auto
-          chooseLabel="Upload"
-          accept="image/*,video/*"
-          url={"/alpaca/editor/upload?folder=" + selection[0]}
-          onUpload={async ({ xhr }) => {
-            updateHistory();
-            const response = JSON.parse(xhr.responseText);
-            const thumbs = await loadThumbnails(selectedFolderId);
-            setSelectedImage(thumbs?.find((x) => x.id === response.id));
-          }}
-        />
-
-        <Button
-          disabled={!selectedImage}
-          onClick={() => {
-            updateHistory();
-            onMediaSelected(selectedImage!.id);
-            onHide();
-          }}
-        >
-          Select
-        </Button>
-        <Button onClick={() => onHide()}>Cancel</Button>
-      </DialogButtons>
-    </>
-  );
-};