@agent-native/core 0.152.0 → 0.153.0

package/corpus/templates/content/app/components/editor/CommentsSidebar.tsx

@@ -312,6 +312,8 @@ interface CommentsSidebarProps {
   onSelectedThreadChange?: (id: string | null) => void;
   onHoveredThreadChange?: (id: string | null) => void;
   currentUserEmail?: string;
+  canComment?: boolean;
+  canResolve?: boolean;
   alignToAnchors?: boolean;
   forceVisible?: boolean;
 }
@@ -329,6 +331,8 @@ export function CommentsSidebar({
   onSelectedThreadChange,
   onHoveredThreadChange,
   currentUserEmail,
+  canComment = true,
+  canResolve = false,
   alignToAnchors = true,
   forceVisible = false,
 }: CommentsSidebarProps) {
@@ -367,6 +371,7 @@ export function CommentsSidebar({
   }, [pendingComment]);
 
   const handlePendingSubmit = () => {
+    if (!canComment) return;
     if (!pendingText.trim() || createComment.isPending) return;
     createComment.mutate(
       {
@@ -401,6 +406,7 @@ export function CommentsSidebar({
   };
 
   const handleReply = (threadId: string) => {
+    if (!canComment) return;
     if (!replyText.trim() || createComment.isPending) return;
     const thread = threads?.find((t) => t.threadId === threadId);
     createComment.mutate(
@@ -583,6 +589,7 @@ export function CommentsSidebar({
   );
 
   const handleResolve = (thread: CommentThread) => {
+    if (!canResolve) return;
     resolveComment.mutate({
       id: thread.comments[0].id,
       documentId,
@@ -597,6 +604,7 @@ export function CommentsSidebar({
   };
 
   const handleReopen = (thread: CommentThread) => {
+    if (!canResolve) return;
     resolveComment.mutate({
       id: thread.comments[0].id,
       documentId,
@@ -706,9 +714,11 @@ export function CommentsSidebar({
                   scrollContainerRef?.current ?? null,
                   threadPositions.get(thread.threadId)?.documentTop,
                 );
-                setReplyingThreadId((current) =>
-                  current === thread.threadId ? null : thread.threadId,
-                );
+                if (canComment) {
+                  setReplyingThreadId((current) =>
+                    current === thread.threadId ? null : thread.threadId,
+                  );
+                }
                 setReplyText("");
                 setReplyMentions([]);
               }}
@@ -725,6 +735,8 @@ export function CommentsSidebar({
               }
               onHeightChange={handleThreadCardHeightChange}
               members={members}
+              canComment={canComment}
+              canResolve={canResolve}
               onSubmitReply={() => handleReply(thread.threadId)}
               onResolve={() => handleResolve(thread)}
               onSendToAI={() => handleSendToAI(thread)}
@@ -753,6 +765,7 @@ export function CommentsSidebar({
                 <ResolvedThreadView
                   key={thread.threadId}
                   thread={thread}
+                  canResolve={canResolve}
                   onReopen={() => handleReopen(thread)}
                   t={t}
                 />
@@ -814,6 +827,8 @@ function ThreadView({
   onHeightChange,
   onSubmitReply,
   onResolve,
+  canComment,
+  canResolve,
   onSendToAI,
   t,
 }: {
@@ -832,6 +847,8 @@ function ThreadView({
   onHeightChange: (threadId: string, height: number) => void;
   onSubmitReply: () => void;
   onResolve: () => void;
+  canComment: boolean;
+  canResolve: boolean;
   onSendToAI: () => void;
   t: ReturnType<typeof useT>;
 }) {
@@ -890,20 +907,22 @@ function ThreadView({
             </TooltipTrigger>
             <TooltipContent>{t("comments.askAi")}</TooltipContent>
           </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onResolve();
-                }}
-                className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent"
-              >
-                <IconCheck size={14} />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("comments.resolve")}</TooltipContent>
-          </Tooltip>
+          {canResolve ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onResolve();
+                  }}
+                  className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent"
+                >
+                  <IconCheck size={14} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{t("comments.resolve")}</TooltipContent>
+            </Tooltip>
+          ) : null}
         </div>
 
         {/* Comments */}
@@ -931,7 +950,7 @@ function ThreadView({
       </div>
 
       {/* Expanded: Notion-style reply input */}
-      {isExpanded && (
+      {isExpanded && canComment && (
         <div
           className="flex items-center gap-2 px-3 pb-3 pt-1"
           onClick={(e) => e.stopPropagation()}
@@ -979,10 +998,12 @@ function ThreadView({
 function ResolvedThreadView({
   thread,
   onReopen,
+  canResolve,
   t,
 }: {
   thread: CommentThread;
   onReopen: () => void;
+  canResolve: boolean;
   t: ReturnType<typeof useT>;
 }) {
   const first = thread.comments[0];
@@ -1003,17 +1024,19 @@ function ResolvedThreadView({
         <span className="flex-1 truncate text-[13px] text-muted-foreground">
           {renderCommentBody(first.content, first.mentions)}
         </span>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={onReopen}
-              className="p-1 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/resolved:opacity-100"
-            >
-              <IconArrowBackUp size={14} />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("comments.reopen")}</TooltipContent>
-        </Tooltip>
+        {canResolve ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={onReopen}
+                className="p-1 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/resolved:opacity-100"
+              >
+                <IconArrowBackUp size={14} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{t("comments.reopen")}</TooltipContent>
+          </Tooltip>
+        ) : null}
       </div>
     </div>
   );

package/corpus/templates/content/app/components/editor/DocumentEditor.tsx

@@ -578,6 +578,13 @@ function DocumentEditorBody({
   // Shared with DocumentToolbar via the same localStorage key — both read it.
   const [autoSync] = useLocalStorage(`notion-auto-sync:${documentId}`, false);
   const isLocalFileDocument = document.source?.mode === "local-files";
+  const canComment =
+    !isLocalFileDocument &&
+    (document.canComment ??
+      (document.accessRole === "owner" ||
+        document.accessRole === "admin" ||
+        document.accessRole === "editor" ||
+        document.accessRole === "commenter"));
   const canDelete =
     !isLocalFileDocument &&
     !document.database?.systemRole &&
@@ -1466,7 +1473,7 @@ function DocumentEditorBody({
   const [utilityPanel, setUtilityPanel] = useState<DocumentUtilityPanel>(null);
   const activeThreadId = hoveredThreadId ?? selectedThreadId;
   const { data: threads, isLoading: commentsLoading } = useComments(
-    canEdit && !isLocalFileDocument ? documentId : null,
+    !isLocalFileDocument ? documentId : null,
   );
   const hasUtilityRailSpace = useMinViewportWidth(1024);
   const showDesktopUtilityPanel = utilityPanel !== null && hasUtilityRailSpace;
@@ -1655,6 +1662,8 @@ function DocumentEditorBody({
       onSelectedThreadChange={setSelectedThreadId}
       onHoveredThreadChange={setHoveredThreadId}
       currentUserEmail={session?.email}
+      canComment={canComment}
+      canResolve={canEdit}
       alignToAnchors={hasUtilityRailSpace}
       forceVisible
     />
@@ -1770,7 +1779,7 @@ function DocumentEditorBody({
             onDelete={handleDeleteDocument}
             utilityPanel={utilityPanel}
             onUtilityPanelChange={handleUtilityPanelChange}
-            showCommentsControl={editorCanEdit && !isLocalFileDocument}
+            showCommentsControl={canComment && !isLocalFileDocument}
             onOpenBreadcrumbItem={handleOpenToolbarBreadcrumb}
           />
 
@@ -1994,16 +2003,12 @@ function DocumentEditorBody({
                           localFilePath={
                             isLocalFileDocument ? document.source?.path : null
                           }
-                          onComment={
-                            editorCanEdit && !isLocalFileDocument
-                              ? handleComment
-                              : undefined
-                          }
+                          onComment={canComment ? handleComment : undefined}
                           commentThreads={threads ?? []}
                           activeThreadId={activeThreadId}
                           pendingHighlight={pendingComment?.range ?? null}
                           onActivateThread={
-                            editorCanEdit && !isLocalFileDocument
+                            !isLocalFileDocument
                               ? activateCommentThread
                               : undefined
                           }

package/corpus/templates/content/app/components/editor/DocumentProperties.tsx

@@ -71,6 +71,7 @@ import {
   IconPaperclip,
   IconPhone,
   IconPlus,
+  IconPlugConnected,
   IconSearch,
   IconSquareCheck,
   IconTrash,
@@ -3135,6 +3136,9 @@ export function AddProperty({
   popoversPortalled = true,
   source,
   sources,
+  onConnectSource,
+  openRequestId = 0,
+  onOpenRequestHandled,
 }: {
   documentId: string;
   databaseId: string;
@@ -3143,18 +3147,26 @@ export function AddProperty({
   popoversPortalled?: boolean;
   source?: ContentDatabaseSource | null;
   sources?: ContentDatabaseSource[];
+  onConnectSource?: () => void;
+  openRequestId?: number;
+  onOpenRequestHandled?: (requestId: number) => void;
 }) {
   const t = useT();
   const configure = useConfigureDocumentProperty(documentId, databaseId);
   const addSourceFieldProperty =
     useAddContentDatabaseSourceFieldProperty(documentId);
   const [open, setOpen] = useState(false);
+  const [sourceHandoffClosing, setSourceHandoffClosing] = useState(false);
+  const handledOpenRequestId = useRef(0);
   const [typeQuery, setTypeQuery] = useState("");
   const filteredPropertyTypes = filterDocumentPropertyTypes(typeQuery);
   const firstFilteredPropertyType = filteredPropertyTypes[0] ?? null;
   const allSources =
     sources && sources.length > 0 ? sources : source ? [source] : [];
   const query = typeQuery.trim().toLowerCase();
+  const connectSourceLabel = t("editor.properties.connectASource");
+  const connectSourceMatches =
+    !!onConnectSource && matchesConnectSourceQuery(connectSourceLabel, query);
   const sourceFieldGroups = allSources
     .map((src) => ({
       source: src,
@@ -3199,6 +3211,17 @@ export function AddProperty({
     return () => cancelAnimationFrame(frame);
   }, [open]);
 
+  useEffect(() => {
+    if (openRequestId === 0 || openRequestId === handledOpenRequestId.current)
+      return;
+    handledOpenRequestId.current = openRequestId;
+    setTypeQuery("");
+    setAddPropertyError(null);
+    setSourceHandoffClosing(false);
+    setOpen(true);
+    onOpenRequestHandled?.(openRequestId);
+  }, [onOpenRequestHandled, openRequestId]);
+
   function closeAddPropertyPicker() {
     if (isAddingProperty) return;
     setTypeQuery("");
@@ -3206,6 +3229,17 @@ export function AddProperty({
     setOpen(false);
   }
 
+  function connectSource() {
+    if (!onConnectSource || isAddingProperty) return;
+    setTypeQuery("");
+    setAddPropertyError(null);
+    // Radix keeps closing popovers mounted for their exit animation. Remove
+    // this one immediately so opening Sources cannot stack over it.
+    setSourceHandoffClosing(true);
+    setOpen(false);
+    onConnectSource();
+  }
+
   async function add(type: DocumentPropertyType) {
     const label = t(`editor.propertyTypes.${type}`);
     setPendingPropertyType(type);
@@ -3283,6 +3317,7 @@ export function AddProperty({
       open={open}
       onOpenChange={(nextOpen) => {
         if (nextOpen) {
+          setSourceHandoffClosing(false);
           setOpen(true);
         } else if (!isAddingProperty) {
           closeAddPropertyPicker();
@@ -3310,7 +3345,11 @@ export function AddProperty({
         align={variant === "default" ? "start" : "end"}
         collisionPadding={12}
         portalled={popoversPortalled}
-        className="relative z-[300] w-80 p-2"
+        className={cn(
+          "relative z-[300] w-80 p-2",
+          sourceHandoffClosing &&
+            "data-[state=closed]:hidden data-[state=closed]:animate-none",
+        )}
       >
         <div className="grid gap-2">
           <div className="flex h-8 items-center gap-1 rounded border border-border bg-background px-2">
@@ -3326,6 +3365,9 @@ export function AddProperty({
                 if (event.key === "Enter" && firstFilteredPropertyType) {
                   event.preventDefault();
                   void add(firstFilteredPropertyType);
+                } else if (event.key === "Enter" && connectSourceMatches) {
+                  event.preventDefault();
+                  connectSource();
                 }
                 if (event.key === "Escape") {
                   event.preventDefault();
@@ -3336,6 +3378,16 @@ export function AddProperty({
             />
           </div>
           <div className="max-h-80 overflow-auto rounded border p-1">
+            {connectSourceMatches ? (
+              <button
+                type="button"
+                className="mb-1 flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={connectSource}
+              >
+                <IconPlugConnected className="size-4 shrink-0 text-muted-foreground" />
+                <span className="flex-1">{connectSourceLabel}</span>
+              </button>
+            ) : null}
             {sourceFieldGroups.map((group) => (
               <div
                 key={group.source.id}
@@ -3407,7 +3459,7 @@ export function AddProperty({
                 })}
               </div>
             ))}
-            {filteredPropertyTypes.length === 0 ? (
+            {filteredPropertyTypes.length === 0 && !connectSourceMatches ? (
               <div className="px-2 py-3 text-sm text-muted-foreground">
                 {t("editor.properties.noMatchingPropertyTypes")}
               </div>
@@ -3494,3 +3546,11 @@ export function filterDocumentPropertyTypes(
     );
   });
 }
+
+export function matchesConnectSourceQuery(label: string, query: string) {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  return (
+    normalizedQuery.length === 0 ||
+    label.toLocaleLowerCase().includes(normalizedQuery)
+  );
+}