feat: init
This commit is contained in:
chuan
113
apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
Normal file
113
apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { useState } from "react";
|
||||
import { CircleArrowUp, CornerDownRight, RefreshCcw, Sparkles } from "lucide-react";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
// components
|
||||
import { cn } from "@plane/utils";
|
||||
import { RichTextEditor } from "@/components/editor/rich-text";
|
||||
// helpers
|
||||
// hooks
|
||||
import { useWorkspace } from "@/hooks/store/use-workspace";
|
||||
|
||||
type Props = {
|
||||
handleInsertText: (insertOnNextLine: boolean) => void;
|
||||
handleRegenerate: () => Promise<void>;
|
||||
isRegenerating: boolean;
|
||||
response: string | undefined;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export const AskPiMenu: React.FC<Props> = (props) => {
|
||||
const { handleInsertText, handleRegenerate, isRegenerating, response, workspaceSlug } = props;
|
||||
// states
|
||||
const [query, setQuery] = useState("");
|
||||
// store hooks
|
||||
const { getWorkspaceBySlug } = useWorkspace();
|
||||
// derived values
|
||||
const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
|
||||
|
||||
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>
|
||||
<RichTextEditor
|
||||
editable={false}
|
||||
displayConfig={{
|
||||
fontSize: "small-font",
|
||||
}}
|
||||
id="editor-ai-response"
|
||||
initialValue={response}
|
||||
containerClassName="!p-0 border-none"
|
||||
editorClassName="!pl-0"
|
||||
workspaceId={workspaceId}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
2
apps/web/ce/components/pages/editor/ai/index.ts
Normal file
2
apps/web/ce/components/pages/editor/ai/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from "./ask-pi-menu";
|
||||
export * from "./menu";
|
||||
304
apps/web/ce/components/pages/editor/ai/menu.tsx
Normal file
304
apps/web/ce/components/pages/editor/ai/menu.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { ChevronRight, CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
|
||||
// plane editor
|
||||
import type { EditorRefApi } from "@plane/editor";
|
||||
// plane ui
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
// components
|
||||
import { cn } from "@plane/utils";
|
||||
import { RichTextEditor } from "@/components/editor/rich-text";
|
||||
// plane web constants
|
||||
import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/plane-web/constants/ai";
|
||||
// plane web services
|
||||
import type { TTaskPayload } from "@/services/ai.service";
|
||||
import { AIService } from "@/services/ai.service";
|
||||
import { AskPiMenu } from "./ask-pi-menu";
|
||||
const aiService = new AIService();
|
||||
|
||||
type Props = {
|
||||
editorRef: EditorRefApi | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
workspaceId: string;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
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, workspaceId, workspaceSlug } = 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 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?.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?.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?.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?.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}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
<RichTextEditor
|
||||
displayConfig={{
|
||||
fontSize: "small-font",
|
||||
}}
|
||||
editable={false}
|
||||
id="editor-ai-response"
|
||||
initialValue={response}
|
||||
containerClassName="!p-0 border-none"
|
||||
editorClassName="!pl-0"
|
||||
workspaceId={workspaceId}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user