@alpaca-editor/core 1.0.3942 → 1.0.3944

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

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

@@ -0,0 +1,94 @@
+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/MediaFolderBrowser.tsx

@@ -0,0 +1,321 @@
+import { useEffect, useState } from "react";
+import { classNames } from "primereact/utils";
+import { Button } from "primereact/button";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { useEditContext } from "../client/editContext";
+import { getChildren } from "../services/contentService";
+import { Thumbnail } from "./Thumbnails";
+
+type ViewMode = "grid" | "list" | "large-grid";
+
+export function MediaFolderBrowser({
+  folderId,
+  language = "en",
+  onMediaSelected,
+}: {
+  folderId: string;
+  language?: string;
+  onMediaSelected?: (mediaId: string) => void;
+}) {
+  const [viewMode, setViewMode] = useState<ViewMode>("grid");
+  const [images, setImages] = useState<Thumbnail[]>([]);
+  const [selectedImage, setSelectedImage] = useState<Thumbnail>();
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    loadMediaFiles();
+  }, [folderId]);
+
+  const loadMediaFiles = async () => {
+    if (!editContext || !folderId) return;
+
+    setLoading(true);
+    try {
+      const children = await getChildren(
+        folderId,
+        editContext.sessionId,
+        [
+          "C97BA923-8009-4858-BDD5-D8BE5FCCECF7", // Image
+          "F1828A2C-7E5D-4BBD-98CA-320474871548", // Another image type
+          "e76adbdf-87d1-4fcb-ba71-274f7dbf5670", // Video
+          "374d3a99-c098-4cd2-8fbc-dc2d1ca1c904", // Another video type
+        ],
+        false,
+        language,
+      );
+      setImages(children || []);
+    } catch (error) {
+      console.error("Error loading media files:", error);
+      setImages([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClick = (thumbnail: Thumbnail) => {
+    setSelectedImage(thumbnail);
+  };
+
+  const handleUpload = async () => {
+    if (!folderId) return;
+
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.multiple = true;
+    fileInput.accept = "image/*,video/*";
+    fileInput.onchange = async (e) => {
+      const files = Array.from((e.target as HTMLInputElement).files || []);
+      if (files.length > 0) {
+        await uploadFiles(files);
+      }
+    };
+    fileInput.click();
+  };
+
+  const uploadFiles = async (files: File[]) => {
+    const formData = new FormData();
+    files.forEach((file, index) => {
+      formData.append("file" + index, file);
+    });
+
+    try {
+      setUploading(true);
+      const response = await fetch("/alpaca/editor/upload?folder=" + folderId, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error("Upload failed");
+      }
+
+      // Reload media files after successful upload
+      await loadMediaFiles();
+    } catch (error) {
+      console.error("Error uploading files:", error);
+      if (editContext) {
+        editContext.showToast({
+          severity: "error",
+          summary: "Upload failed",
+          detail: "Failed to upload files. Please try again.",
+        });
+      }
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const GridView = () => (
+    <div
+      className="grid gap-3 p-4"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
+      }}
+    >
+      {images.map((t) => (
+        <div
+          key={t.id}
+          className={classNames(
+            selectedImage?.id === t.id
+              ? "shadow-lg ring-2 ring-blue-500"
+              : "shadow-sm hover:shadow-md",
+            "cursor-pointer overflow-hidden rounded-lg bg-white transition-all duration-200 hover:scale-105",
+          )}
+          onClick={() => handleClick(t)}
+        >
+          <div className="flex aspect-square items-center justify-center bg-gray-50">
+            <img
+              src={t.thumbUrl}
+              alt={t.name}
+              className="max-h-full max-w-full object-contain"
+            />
+          </div>
+          <div className="p-2">
+            <div className="line-clamp-2 text-xs font-medium break-all text-gray-700">
+              {t.name}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const LargeGridView = () => (
+    <div
+      className="grid gap-4 p-4"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+      }}
+    >
+      {images.map((t) => (
+        <div
+          key={t.id}
+          className={classNames(
+            selectedImage?.id === t.id
+              ? "shadow-lg ring-2 ring-blue-500"
+              : "shadow-sm hover:shadow-md",
+            "cursor-pointer overflow-hidden rounded-lg bg-white transition-all duration-200 hover:scale-105",
+          )}
+          onClick={() => handleClick(t)}
+        >
+          <div className="flex aspect-square items-center justify-center bg-gray-50">
+            <img
+              src={t.previewUrl}
+              alt={t.name}
+              className="max-h-full max-w-full object-contain"
+            />
+          </div>
+          <div className="p-3">
+            <div className="line-clamp-2 text-sm font-medium break-all text-gray-700">
+              {t.name}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const ListView = () => (
+    <div className="flex flex-col gap-1 p-2">
+      {images.map((t) => (
+        <div
+          key={t.id}
+          className={classNames(
+            selectedImage?.id === t.id
+              ? "border-blue-300 bg-blue-100"
+              : "bg-white hover:bg-gray-50",
+            "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors duration-200",
+          )}
+          onClick={() => handleClick(t)}
+        >
+          <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-md bg-gray-50">
+            <img
+              src={t.thumbUrl}
+              alt={t.name}
+              className="max-h-full max-w-full object-contain"
+            />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm font-medium text-gray-900">
+              {t.name}
+            </div>
+            <div className="mt-1 text-xs text-gray-500">Media File</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="flex h-64 items-center justify-center">
+          <ProgressSpinner style={{ width: "32px", height: "32px" }} />
+        </div>
+      );
+    }
+
+    if (images.length === 0) {
+      return (
+        <div className="flex h-64 flex-col items-center justify-center text-gray-500">
+          <div className="mb-4 text-4xl">📁</div>
+          <div className="text-lg font-medium">No media files found</div>
+          <div className="text-sm">Upload some media files to get started</div>
+        </div>
+      );
+    }
+
+    switch (viewMode) {
+      case "grid":
+        return <GridView />;
+      case "large-grid":
+        return <LargeGridView />;
+      case "list":
+        return <ListView />;
+      default:
+        return <GridView />;
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* View Mode Toolbar */}
+      <div className="flex items-center justify-between border-b bg-gray-50 px-4 py-2">
+        <div className="text-sm font-medium text-gray-700">
+          {images.length} media file{images.length !== 1 ? "s" : ""}
+        </div>
+        <div className="flex gap-1">
+          <Button
+            icon="pi pi-th-large"
+            size="small"
+            outlined={viewMode === "grid"}
+            onClick={() => setViewMode("grid")}
+            tooltip="Grid View"
+            tooltipOptions={{ position: "bottom" }}
+            className="p-1"
+          />
+          <Button
+            icon="pi pi-stop"
+            size="small"
+            outlined={viewMode === "large-grid"}
+            onClick={() => setViewMode("large-grid")}
+            tooltip="Large Grid View"
+            tooltipOptions={{ position: "bottom" }}
+            className="p-1"
+          />
+          <Button
+            icon="pi pi-list"
+            size="small"
+            outlined={viewMode === "list"}
+            onClick={() => setViewMode("list")}
+            tooltip="List View"
+            tooltipOptions={{ position: "bottom" }}
+            className="p-1"
+          />
+          <Button
+            icon="pi pi-upload"
+            size="small"
+            onClick={handleUpload}
+            disabled={uploading || !folderId}
+            tooltip="Upload Files"
+            tooltipOptions={{ position: "bottom" }}
+            className="ml-2 p-1"
+          />
+          <Button
+            icon="pi pi-refresh"
+            size="small"
+            onClick={loadMediaFiles}
+            tooltip="Refresh"
+            tooltipOptions={{ position: "bottom" }}
+            className="ml-1 p-1"
+          />
+        </div>
+      </div>
+
+      {/* Content Area */}
+      <div
+        className="flex-1 overflow-x-hidden overflow-y-auto"
+        style={{
+          scrollbarWidth: "thin",
+          scrollbarColor: "#9CA3AF #F3F4F6",
+        }}
+      >
+        {renderContent()}
+      </div>
+
+      {/* Selected Item Info */}
+      {selectedImage && (
+        <div className="border-t bg-gray-50 p-3">
+          <div className="truncate text-sm font-medium text-gray-900">
+            Selected: {selectedImage.name}
+          </div>
+          <div className="mt-1 text-xs text-gray-500">
+            Click to select media item
+          </div>
+        </div>
+      )}
+    </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 h-full flex-col">
+        <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="absolute inset-0 flex flex-col 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" : "",
+              "flex w-24 cursor-pointer flex-col justify-between p-1 hover:shadow-md",
+            )}
+            onDoubleClick={() => {
+              onMediaSelected(t.id);
+              onHide();
+            }}
+            onClick={() => setSelectedImage(t)}
+          >
+            <div className="flex h-24 w-24 items-center justify-center">
+              <img src={t.thumbUrl} />
+            </div>
+            <div className="text-xs break-all">{t.name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}