@alpaca-editor/core 1.0.4057 → 1.0.4061

package/src/editor/page-editor-chrome/useInlineAICompletion.tsx

@@ -375,7 +375,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
             content: contentUpToCursor,
           },
         },
-        { model: "gpt-4.1-nano" },
+        { model: "gpt-4.1-nano", sessionId: editContext.sessionId },
         { signal },
       );
 

package/src/editor/reviews/Comment.tsx

@@ -7,25 +7,20 @@ import {
   resolveComment,
   unresolveComment,
 } from "../services/reviewsService";
-import { Button } from "../../components/ui/button";
-import { formatDate } from "../utils";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../components/ui/popover";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { useDebouncedCallback } from "use-debounce";
-import { ActionButton } from "../../components/ActionButton";
-
-export function Comment({ comment }: { comment: CommentType }) {
+import { CommentView } from "./CommentView";
+import { CommentEditor } from "./CommentEditor";
+
+export function Comment({
+  comment,
+  availableTags = [],
+}: {
+  comment: CommentType;
+  availableTags?: { label: string; color: string }[];
+}) {
   const editContext = useEditContext();
-  const [commentText, setCommentText] = useState(comment.text);
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [deletePopoverOpen, setDeletePopoverOpen] = useState(false);
-  const [resolvePopoverOpen, setResolvePopoverOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -35,38 +30,11 @@ export function Comment({ comment }: { comment: CommentType }) {
   const isSelected = comment.id === editContext?.selectedComment?.id;
 
   useEffect(() => {
-    if (isSelected) {
-      if (ref.current) {
-        ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
-      }
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelected]);
 
-  const renderContextInfo = () => {
-    const showItemName =
-      comment.itemId && comment.mainItemId !== comment.itemId;
-
-    const showFieldName = comment.fieldId;
-
-    if (!showItemName && !showFieldName) return null;
-
-    return (
-      <div className="mt-3 flex items-center border-t pt-3 text-xs">
-        {showItemName && (
-          <div className="text-2xs text-gray-500">{comment.itemName}</div>
-        )}
-
-        {showFieldName && showItemName && (
-          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
-        )}
-
-        {showFieldName && (
-          <div className="text-2xs text-gray-500">{comment.fieldName}</div>
-        )}
-      </div>
-    );
-  };
-
   const canDelete =
     !comment.isNew && comment.author === editContext?.user?.name;
 
@@ -77,138 +45,95 @@ export function Comment({ comment }: { comment: CommentType }) {
 
   const canResolve = !comment.isNew && !editContext?.readonly;
 
-  const getHiddenSystemPrompt = (comment: CommentType) => {
-    let prompt =
-      "Please make suggestions how to resolve a review comment. Ask the user whether you should apply the suggested changes.";
-    if (comment.itemId) {
-      prompt += "\n\nItemId: " + comment.itemId;
-    }
-    if (comment.itemName) {
-      prompt += "\n\nItem name: " + comment.itemName;
-    }
-    if (comment.itemId) {
-      prompt += "\n\nItemId: " + comment.itemId;
+  const setCommentsDebounced = useDebouncedCallback(() => {
+    if (!editContext?.setComments) return;
+    editContext.setComments([...editContext.comments]);
+  }, 300);
+
+  const handleSave = async (text: string, tags: string[]) => {
+    comment.text = text;
+    comment.tags = tags.join(",");
+    setIsSaving(true);
+
+    try {
+      const item = await editContext?.itemsRepository?.getItem({
+        id: comment.itemId,
+        language: comment.language,
+        version: comment.version,
+      });
+
+      if (item && comment.fieldId) {
+        comment.fieldValue = item.fields.find(
+          (f) => f.id === comment.fieldId,
+        )?.rawValue;
+      }
+
+      await createOrUpdateComment(comment);
+      setIsEditing(false);
+    } finally {
+      setIsSaving(false);
     }
-    if (comment.fieldName) {
-      prompt += "\n\nField name: " + comment.fieldName;
+  };
+
+  const handleCancel = () => {
+    if (comment.isNew) {
+      if (editContext?.setComments) {
+        editContext.setComments([
+          ...editContext.comments.filter((c) => c.id !== comment.id),
+        ]);
+      }
+    } else {
+      setIsEditing(false);
     }
-    return prompt;
   };
 
-  const renderHeader = () => {
-    return (
-      <>
-        <div className="mb-3 flex items-start justify-between">
-          <div>
-            <div
-              className="text-xs font-bold text-gray-900"
-              title={comment.author}
-            >
-              {comment.authorDisplayName}
-            </div>
-            <div className="text-xs text-gray-500">
-              {comment.created ? formatDate(new Date(comment.created)) : ""}
-            </div>
-          </div>
-          <div className="text-xs text-gray-500">
-            {!isEditing && canEdit && (
-              <SimpleIconButton
-                icon="pi pi-pencil"
-                label="Edit"
-                onClick={() => setIsEditing(true)}
-              />
-            )}
-            {canDelete && (
-              <Popover
-                open={deletePopoverOpen}
-                onOpenChange={setDeletePopoverOpen}
-              >
-                <PopoverTrigger asChild>
-                  <button
-                    className="pi pi-trash hover:bg-gray-5 cursor-pointer rounded-full p-[6px] text-xs"
-                    title="Delete"
-                  />
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-2" align="end">
-                  <Button
-                    variant="outline"
-                    onClick={async () => {
-                      await deleteComment(comment);
-                      setDeletePopoverOpen(false);
-                    }}
-                  >
-                    Delete
-                  </Button>
-                </PopoverContent>
-              </Popover>
-            )}
-            {canResolve && !comment.isResolved && (
-              <SimpleIconButton
-                icon="pi pi-check"
-                label="Resolve"
-                onClick={async () => {
-                  await resolveComment(comment);
-                }}
-              />
-            )}
-            {comment.isResolved && (
-              <Popover
-                open={resolvePopoverOpen}
-                onOpenChange={setResolvePopoverOpen}
-              >
-                <PopoverTrigger asChild>
-                  <i
-                    className="pi pi-check cursor-pointer px-1 text-xs text-green-500"
-                    style={{ fontWeight: "bold" }}
-                    title={
-                      "Resolved by " +
-                      comment.resolvedBy +
-                      " (" +
-                      formatDate(new Date(comment.resolvedDate!)) +
-                      ")"
-                    }
-                  />
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-2" align="end">
-                  <Button
-                    variant="outline"
-                    onClick={async () => {
-                      await unresolveComment(comment);
-                      setResolvePopoverOpen(false);
-                    }}
-                  >
-                    Unresolve
-                  </Button>
-                </PopoverContent>
-              </Popover>
-            )}
-            {canResolve && !comment.isResolved && (
-              <SimpleIconButton
-                icon="pi pi-sparkles"
-                label="AI"
-                onClick={async (event) => {
-                  // editContext?.showAiPopup(event as any, {
-                  //   initialPrompt:
-                  //     'Please help me resolve this comment: "' +
-                  //     comment.text +
-                  //     '"',
-                  //   hiddenSystemPrompt: getHiddenSystemPrompt(comment),
-                  // });
-                }}
-              />
-            )}
-          </div>
-        </div>
-      </>
-    );
+  const handleDelete = async () => {
+    await deleteComment(comment);
   };
 
-  const setCommentsDebounced = useDebouncedCallback(() => {
-    if (!editContext?.setComments) return;
-    editContext.setComments([...editContext.comments]);
-  }, 300);
+  const handleResolve = async () => {
+    await resolveComment(comment);
+  };
 
-  return !isEditing ? (
+  const handleUnresolve = async () => {
+    await unresolveComment(comment);
+  };
+
+  const handleAiAction = () => {
+    // TODO: Implement AI action
+    // editContext?.showAiPopup(event as any, {
+    //   initialPrompt:
+    //     'Please help me resolve this comment: "' +
+    //     comment.text +
+    //     '"',
+    //   hiddenSystemPrompt: getHiddenSystemPrompt(comment),
+    // });
+  };
+
+  if (isEditing) {
+    return (
+      <div ref={ref} className="mb-3 rounded-lg bg-white p-3 shadow-sm">
+        <CommentEditor
+          initialText={comment.text}
+          onSave={handleSave}
+          onCancel={handleCancel}
+          isSaving={isSaving}
+          availableTags={availableTags}
+          selectedTags={
+            comment.tags
+              ?.split(",")
+              .map((t) => t.trim())
+              .filter(Boolean) || []
+          }
+          placeholder="Add a comment..."
+          submitLabel={comment.isNew ? "Comment" : "Save"}
+          showTagSelector={false} // Tags not shown in sidebar editor for now
+        />
+      </div>
+    );
+  }
+
+  return (
     <div
       ref={ref}
       key={comment.id}
@@ -235,82 +160,18 @@ export function Comment({ comment }: { comment: CommentType }) {
         }
       }}
     >
-      {renderHeader()}
-      <div className="text-sm whitespace-pre-wrap text-gray-700">
-        {comment.text}
-      </div>
-      {renderContextInfo()}
-    </div>
-  ) : (
-    <div key="new-comment" className="mb-3 rounded-lg bg-white p-3 shadow-sm">
-      {renderHeader()}
-      <textarea
-        className="mt-2 min-h-[100px] w-full rounded border border-gray-200 p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-        placeholder="Add a comment..."
-        value={commentText}
-        onChange={async (e) => {
-          if (!editContext) return;
-          setCommentText(e.target.value);
-
-          setCommentsDebounced();
-        }}
-        autoFocus
+      <CommentView
+        comment={comment}
+        canEdit={canEdit}
+        canDelete={canDelete}
+        canResolve={canResolve}
+        availableTags={availableTags}
+        onEdit={() => setIsEditing(true)}
+        onDelete={handleDelete}
+        onResolve={handleResolve}
+        onUnresolve={handleUnresolve}
+        onAiAction={handleAiAction}
       />
-      {isSaving && (
-        <div className="flex-wra mt-1 flex justify-end gap-2">
-          <div className="flex items-center gap-2 text-xs text-gray-500">
-            <ProgressSpinner className="h-4 w-4" />
-            Saving...
-          </div>
-        </div>
-      )}
-      {!isSaving && (
-        <div className="mt-1 flex flex-wrap justify-end gap-2">
-          <ActionButton
-            variant="outline"
-            onClick={() => {
-              if (comment.isNew) {
-                if (editContext?.setComments) {
-                  editContext.setComments([
-                    ...editContext.comments.filter((c) => c.id !== comment.id),
-                  ]);
-                }
-              } else {
-                setIsEditing(false);
-              }
-            }}
-          >
-            Cancel
-          </ActionButton>
-
-          <ActionButton
-            className="tour-submit-comment-button"
-            onClick={async () => {
-              comment.text = commentText;
-              setIsSaving(true);
-              const item = await editContext?.itemsRepository?.getItem({
-                id: comment.itemId,
-                language: comment.language,
-                version: comment.version,
-              });
-
-              if (item) {
-                comment.fieldValue = item.fields.find(
-                  (f) => f.id === comment.fieldId,
-                )?.rawValue;
-              }
-
-              await createOrUpdateComment(comment);
-
-              setIsSaving(false);
-              setIsEditing(false);
-            }}
-          >
-            {comment.isNew ? "Comment" : "Save"}
-          </ActionButton>
-        </div>
-      )}
-      {renderContextInfo()}
     </div>
   );
 }