@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,186 @@
+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,
+          ["get-content"],
+          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-col gap-2 text-sm pt-2 px-2 flex-1">
+            <div>
+              Search prompt
+              <div className="flex gap-2 items-center">
+                <InputText
+                  ref={inputRef} // Add ref to InputText
+                  value={prompt}
+                  onChange={onPromptChange}
+                  className="flex-1"
+                />
+                {loadingPrompt && (
+                  <div className="flex items-center h-10">
+                    <ProgressSpinner
+                      style={{ width: "24px", height: "24px" }}
+                    />
+                  </div>
+                )}
+                {!loadingPrompt && (
+                  <Button
+                    icon="pi pi-sparkles"
+                    onClick={() => suggestPrompt()}
+                    label="Suggest"
+                    size="small"
+                  />
+                )}
+              </div>
+            </div>
+            <div className="flex-1 relative">
+              {loadingThumbnails && (
+                <div className="flex items-center h-full">
+                  <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

@@ -0,0 +1,95 @@
+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,
+          ["get-content"],
+          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="flex gap-2 items-center m-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 items-center h-10">
+          <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

@@ -0,0 +1,42 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,292 @@
+"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>
+    </>
+  );
+};