From 9ffc67b5e7db0b033f2b60ce509e3050ea2e5e2e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 2 Sep 2024 15:53:53 +0530
Subject: [PATCH] fix: ai menu build

---
 .../pages/editor/ai/ask-pi-menu.tsx           | 103 ------
 web/ce/components/pages/editor/ai/index.ts    |   3 +-
 web/ce/components/pages/editor/ai/menu.tsx    | 299 ------------------
 3 files changed, 1 insertion(+), 404 deletions(-)
 delete mode 100644 web/ce/components/pages/editor/ai/ask-pi-menu.tsx
 delete mode 100644 web/ce/components/pages/editor/ai/menu.tsx

diff --git a/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
deleted file mode 100644
index d3440ea479..0000000000
--- a/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useState } from "react";
-import { CircleArrowUp, CornerDownRight, RefreshCcw, Sparkles } from "lucide-react";
-// ui
-import { Tooltip } from "@plane/ui";
-// components
-import { RichTextReadOnlyEditor } from "@/components/editor";
-// helpers
-import { cn } from "@/helpers/common.helper";
-
-type Props = {
-  handleInsertText: (insertOnNextLine: boolean) => void;
-  handleRegenerate: () => Promise<void>;
-  isRegenerating: boolean;
-  response: string | undefined;
-};
-
-export const AskPiMenu: React.FC<Props> = (props) => {
-  const { handleInsertText, handleRegenerate, isRegenerating, response } = props;
-  // states
-  const [query, setQuery] = useState("");
-
-  return (
-    <>
-      <div
-        className={cn("flex items-center gap-3 px-4 py-3.5", {
-          "items-start": response,
-        })}
-      >
-        <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
-          <Sparkles className="size-3" />
-        </span>
-        {response ? (
-          <div>
-            <RichTextReadOnlyEditor
-              displayConfig={{
-                fontSize: "small-font",
-              }}
-              id="editor-ai-response"
-              initialValue={response}
-              containerClassName="!p-0 border-none"
-              editorClassName="!pl-0"
-            />
-            <div className="mt-3 flex items-center gap-4">
-              <button
-                type="button"
-                className="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
-                onClick={() => handleInsertText(false)}
-              >
-                Replace selection
-              </button>
-              <Tooltip tooltipContent="Add to next line">
-                <button
-                  type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
-                  onClick={() => handleInsertText(true)}
-                >
-                  <CornerDownRight className="text-custom-text-300 size-4" />
-                </button>
-              </Tooltip>
-              <Tooltip tooltipContent="Re-generate response">
-                <button
-                  type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleRegenerate();
-                  }}
-                  disabled={isRegenerating}
-                >
-                  <RefreshCcw
-                    className={cn("text-custom-text-300 size-4", {
-                      "animate-spin": isRegenerating,
-                    })}
-                  />
-                </button>
-              </Tooltip>
-            </div>
-          </div>
-        ) : (
-          <p className="text-sm text-custom-text-200">Pi is answering...</p>
-        )}
-      </div>
-      <div className="py-3 px-4">
-        <div className="flex items-center gap-2 border border-custom-border-200 rounded-md p-2">
-          <span className="flex-shrink-0 size-3 grid place-items-center">
-            <Sparkles className="size-3 text-custom-text-200" />
-          </span>
-          <input
-            type="text"
-            className="w-full bg-transparent border-none outline-none placeholder:text-custom-text-400 text-sm"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Tell Pi what to do..."
-          />
-          <span className="flex-shrink-0 size-4 grid place-items-center">
-            <CircleArrowUp className="size-4 text-custom-text-200" />
-          </span>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/ce/components/pages/editor/ai/index.ts b/web/ce/components/pages/editor/ai/index.ts
index d21eb63d70..06dbd42f3d 100644
--- a/web/ce/components/pages/editor/ai/index.ts
+++ b/web/ce/components/pages/editor/ai/index.ts
@@ -1,2 +1 @@
-export * from "./ask-pi-menu";
-export * from "./menu";
+export * from "ee/components/pages/editor/ai";
diff --git a/web/ce/components/pages/editor/ai/menu.tsx b/web/ce/components/pages/editor/ai/menu.tsx
deleted file mode 100644
index 4159b65568..0000000000
--- a/web/ce/components/pages/editor/ai/menu.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-"use client";
-
-import React, { RefObject, useEffect, useRef, useState } from "react";
-import { useParams } from "next/navigation";
-import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
-// plane editor
-import { EditorRefApi } from "@plane/editor";
-// plane ui
-import { Tooltip } from "@plane/ui";
-// plane web constants
-import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/ce/constants/ai";
-// components
-import { RichTextReadOnlyEditor } from "@/components/editor";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// plane web services
-import { AIService, TTaskPayload } from "@/services/ai.service";
-import { AskPiMenu } from "./ask-pi-menu";
-const aiService = new AIService();
-
-type Props = {
-  editorRef: RefObject<EditorRefApi>;
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const MENU_ITEMS: {
-  icon: LucideIcon;
-  key: AI_EDITOR_TASKS;
-  label: string;
-}[] = [
-  {
-    key: AI_EDITOR_TASKS.ASK_ANYTHING,
-    icon: Sparkles,
-    label: "Ask Pi",
-  },
-];
-
-const TONES_LIST = [
-  {
-    key: "default",
-    label: "Default",
-    casual_score: 5,
-    formal_score: 5,
-  },
-  {
-    key: "professional",
-    label: "💼 Professional",
-    casual_score: 0,
-    formal_score: 10,
-  },
-  {
-    key: "casual",
-    label: "😃 Casual",
-    casual_score: 10,
-    formal_score: 0,
-  },
-];
-
-export const EditorAIMenu: React.FC<Props> = (props) => {
-  const { editorRef, isOpen, onClose } = props;
-  // states
-  const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
-  const [response, setResponse] = useState<string | undefined>(undefined);
-  const [isRegenerating, setIsRegenerating] = useState(false);
-  // refs
-  const responseContainerRef = useRef<HTMLDivElement>(null);
-  // params
-  const { workspaceSlug } = useParams();
-  const handleGenerateResponse = async (payload: TTaskPayload) => {
-    if (!workspaceSlug) return;
-    await aiService.performEditorTask(workspaceSlug.toString(), payload).then((res) => setResponse(res.response));
-  };
-  // handle task click
-  const handleClick = async (key: AI_EDITOR_TASKS) => {
-    const selection = editorRef.current?.getSelectedText();
-    if (!selection || activeTask === key) return;
-    setActiveTask(key);
-    if (key === AI_EDITOR_TASKS.ASK_ANYTHING) return;
-    setResponse(undefined);
-    setIsRegenerating(false);
-    await handleGenerateResponse({
-      task: key,
-      text_input: selection,
-    });
-  };
-  // handle re-generate response
-  const handleRegenerate = async () => {
-    const selection = editorRef.current?.getSelectedText();
-    if (!selection || !activeTask) return;
-    setIsRegenerating(true);
-    await handleGenerateResponse({
-      task: activeTask,
-      text_input: selection,
-    })
-      .then(() =>
-        responseContainerRef.current?.scrollTo({
-          top: 0,
-          behavior: "smooth",
-        })
-      )
-      .finally(() => setIsRegenerating(false));
-  };
-  // handle re-generate response
-  const handleToneChange = async (key: string) => {
-    const selectedTone = TONES_LIST.find((t) => t.key === key);
-    const selection = editorRef.current?.getSelectedText();
-    if (!selectedTone || !selection || !activeTask) return;
-    setResponse(undefined);
-    setIsRegenerating(false);
-    await handleGenerateResponse({
-      casual_score: selectedTone.casual_score,
-      formal_score: selectedTone.formal_score,
-      task: activeTask,
-      text_input: selection,
-    }).then(() =>
-      responseContainerRef.current?.scrollTo({
-        top: 0,
-        behavior: "smooth",
-      })
-    );
-  };
-  // handle replace selected text with the response
-  const handleInsertText = (insertOnNextLine: boolean) => {
-    if (!response) return;
-    editorRef.current?.insertText(response, insertOnNextLine);
-    onClose();
-  };
-
-  // reset on close
-  useEffect(() => {
-    if (!isOpen) {
-      setActiveTask(null);
-      setResponse(undefined);
-    }
-  }, [isOpen]);
-
-  return (
-    <div
-      className={cn(
-        "w-[210px] flex flex-col rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg transition-all",
-        {
-          "w-[700px]": activeTask,
-        }
-      )}
-    >
-      <div
-        className={cn("flex max-h-72 w-full", {
-          "divide-x divide-custom-border-200": activeTask,
-        })}
-      >
-        <div className="flex-shrink-0 w-[210px] overflow-y-auto px-2 py-2.5 transition-all">
-          {MENU_ITEMS.map((item) => {
-            const isActiveTask = activeTask === item.key;
-
-            return (
-              <button
-                key={item.key}
-                type="button"
-                className={cn(
-                  "w-full flex items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80 transition-colors",
-                  {
-                    "bg-custom-background-80": isActiveTask,
-                  }
-                )}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleClick(item.key);
-                }}
-              >
-                <span className="flex-shrink-0 flex items-center gap-2 truncate">
-                  <item.icon className="flex-shrink-0 size-3" />
-                  {item.label}
-                </span>
-                <ChevronRight
-                  className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
-                    "opacity-100 pointer-events-auto": isActiveTask,
-                  })}
-                />
-              </button>
-            );
-          })}
-        </div>
-        <div
-          ref={responseContainerRef}
-          className={cn("flex-shrink-0 w-0 overflow-hidden transition-all", {
-            "w-[490px] overflow-auto vertical-scrollbar scrollbar-sm": activeTask,
-          })}
-        >
-          {activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
-            <AskPiMenu
-              handleInsertText={handleInsertText}
-              handleRegenerate={handleRegenerate}
-              isRegenerating={isRegenerating}
-              response={response}
-            />
-          ) : (
-            <>
-              <div
-                className={cn("flex items-center gap-3 px-4 py-3.5", {
-                  "items-start": response,
-                })}
-              >
-                <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
-                  <Sparkles className="size-3" />
-                </span>
-                {response ? (
-                  <div>
-                    <RichTextReadOnlyEditor
-                      displayConfig={{
-                        fontSize: "small-font",
-                      }}
-                      id="editor-ai-response"
-                      initialValue={response}
-                      containerClassName="!p-0 border-none"
-                      editorClassName="!pl-0"
-                    />
-                    <div className="mt-3 flex items-center gap-4">
-                      <button
-                        type="button"
-                        className="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
-                        onClick={() => handleInsertText(false)}
-                      >
-                        Replace selection
-                      </button>
-                      <Tooltip tooltipContent="Add to next line">
-                        <button
-                          type="button"
-                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
-                          onClick={() => handleInsertText(true)}
-                        >
-                          <CornerDownRight className="text-custom-text-300 size-4" />
-                        </button>
-                      </Tooltip>
-                      <Tooltip tooltipContent="Re-generate response">
-                        <button
-                          type="button"
-                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            handleRegenerate();
-                          }}
-                          disabled={isRegenerating}
-                        >
-                          <RefreshCcw
-                            className={cn("text-custom-text-300 size-4", {
-                              "animate-spin": isRegenerating,
-                            })}
-                          />
-                        </button>
-                      </Tooltip>
-                    </div>
-                  </div>
-                ) : (
-                  <p className="text-sm text-custom-text-200">
-                    {activeTask ? LOADING_TEXTS[activeTask] : "Pi is writing"}...
-                  </p>
-                )}
-              </div>
-              <div className="sticky bottom-0 w-full bg-custom-background-100 pl-[54.8px] py-2 flex items-center gap-2">
-                {TONES_LIST.map((tone) => (
-                  <button
-                    key={tone.key}
-                    type="button"
-                    className={cn(
-                      "p-1 text-xs text-custom-text-200 font-medium bg-custom-background-80 rounded transition-colors outline-none",
-                      {
-                        "bg-custom-primary-100/20 text-custom-primary-100": tone.key === "default",
-                      }
-                    )}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleToneChange(tone.key);
-                    }}
-                  >
-                    {tone.label}
-                  </button>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-      {activeTask && (
-        <div className="bg-custom-background-90 rounded-b-md py-2 px-4 text-custom-text-300 flex items-center gap-2 border-t border-custom-border-200">
-          <span className="flex-shrink-0 size-4 grid place-items-center">
-            <TriangleAlert className="size-3" />
-          </span>
-          <p className="flex-shrink-0 text-xs font-medium">
-            By using this feature, you consent to sharing the message with a 3rd party service.
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};