Mayank/privado wireframes 2

apps/react/self-hosting/dashboard/postgres/dashboard-postgres-demo/components/document/ActionModal.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useVeltEventCallback, VeltCommentComposer } from '@veltdev/react'
+import { useCommentUtils, useVeltEventCallback, VeltCommentComposer } from '@veltdev/react'
+import { CommentAnnotation } from '@veltdev/types'
 import { useEffect, useState } from 'react'
 
 interface ActionModalProps {
@@ -178,7 +179,31 @@ export default function ActionModal({ jobId, actionType, actionLabel, onClose, o
         }
     ]
 
+    const commentUtils = useCommentUtils();
+    const [annotation, setAnnotation] = useState<CommentAnnotation | null>(null);
 
+    useEffect(() => {
+
+        if(commentUtils) {
+            // @ts-ignore
+            commentUtils.on('composerTextChange').subscribe((event: any) => {
+                console.log('Text changed:', event);
+                // Store annotation by targetComposerElementId for later programmatic submission
+                if (event.annotation && event.targetComposerElementId) {
+                  setAnnotation(event.annotation);
+                }
+          });
+        }
+
+    }, [commentUtils]);
+
+    const handleSubmitProgrammatic = async () => {
+        if(annotation) {
+            const result = await commentUtils?.addCommentAnnotation({ annotation });
+            console.log('addCommentAnnotation result:', result);
+            (commentUtils as any)?.clearComposer({ targetComposerElementId: 'composer-1' });
+        }
+    }
 
     return (
         <>
@@ -216,7 +241,8 @@ export default function ActionModal({ jobId, actionType, actionLabel, onClose, o
                                 jobId: jobId,
                                 commentType: 'action',
                                 highlightData: highlightDataValues[5]
-                            }} shadowDom={false} />
+                            }} shadowDom={false} targetComposerElementId='composer-1' />
+                            <button onClick={() => handleSubmitProgrammatic()}>Submit</button>
                         </div>
                     </div>
                 </div>

apps/react/self-hosting/dashboard/postgres/dashboard-postgres-demo/components/velt/ui-customization/VeltCommentDialogWf.tsx

@@ -36,11 +36,13 @@ const VeltCommentDialogWf = () => {
                                     </div>
                                     <div className="oe-thread-card-info oe--actions-container">
                                         <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
-                                        <VeltCommentDialogWireframe.ResolveButton>
-                                            <div className="oe--icon-button">
-                                                <Checkmark width={17.5} height={17.5} />
-                                            </div>
-                                        </VeltCommentDialogWireframe.ResolveButton>
+                                        <VeltIf condition='{i} === 0'>
+                                            <VeltCommentDialogWireframe.ResolveButton>
+                                                <div className="oe--icon-button">
+                                                    <Checkmark width={17.5} height={17.5} />
+                                                </div>
+                                            </VeltCommentDialogWireframe.ResolveButton>
+                                        </VeltIf>
                                         <VeltCommentDialogWireframe.UnresolveButton>
                                             <div className="oe--icon-button oe--unresolve-button">
                                                 <Checkmark width={17.5} height={17.5} />

apps/react/self-hosting/dashboard/postgres/dashboard-postgres-demo/components/velt/ui-customization/styles.scss

@@ -1886,3 +1886,12 @@ velt-autocomplete-option-description-internal {
     }
   }
 }
+
+
+.oe-thread-card-info oe--actions-container {
+    app-if {
+        &:empty {
+            display: none !important;
+        }
+    }
+}

apps/react/self-hosting/dashboard/postgres/dashboard-postgres-demo/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@veltdev/react": "4.7.1-patch.1",
+    "@veltdev/react": "4.7.4",
     "clsx": "^2",
     "lucide-react": "^0.454.0",
     "next": "^16.1.2",
@@ -24,7 +24,7 @@
     "@types/pg": "^8.11.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@veltdev/types": "4.7.1-patch.1",
+    "@veltdev/types": "4.7.4",
     "autoprefixer": "^10",
     "postcss": "^8",
     "sass": "^1.80.0",

apps/react/self-hosting/dashboard/postgres/dashboard-postgres-demo/tsconfig.json

@@ -14,7 +14,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -32,7 +32,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"

apps/react/self-hosting/forms/page-mode-demo/components/document/document-canvas.tsx

@@ -296,7 +296,7 @@ interface QuestionSectionProps {
   onChange: (value: string) => void
 }
 
-const QuestionSection = ({ question, sectionRef, value, onChange }: QuestionSectionProps) => {
+const QuestionSection = ({ question, sectionRef, value, onChange, activeCommentToolId }: QuestionSectionProps) => {
   const targetElementId = `question-${question.id}`
 
   return (
@@ -331,12 +331,15 @@ const QuestionSection = ({ question, sectionRef, value, onChange }: QuestionSect
         </div>
 
         {/* [Velt] Comment tools for each question row */}
-        <div className="flex items-center gap-1 ml-4 opacity-60 group-hover:opacity-100 transition-opacity">
+        <div className={`flex items-center gap-1 ml-4 ${activeCommentToolId === question.id ? 'velt-comment-tool-wrapper-active' : ''}`}>
           <VeltCommentBubble
-            targetElementId={targetElementId}
+            // targetElementId={targetElementId}
+            openDialog={false}
+            context={{ questionId: question.id, questionNumber: question.number, questionTitle: question.title}}
           />
           <VeltCommentTool
-            targetElementId={targetElementId}
+            contextInPageModeComposer={true}
+            // targetElementId={targetElementId}
             context={{ questionId: question.id, questionNumber: question.number, questionTitle: question.title}}
           />
         </div>
@@ -359,6 +362,7 @@ export default function DocumentCanvas() {
   const [currentStep, setCurrentStep] = useState(1)
   const [answers, setAnswers] = useState<Record<string, string>>({})
   const [isGlobalSidebarOpen, setIsGlobalSidebarOpen] = useState(false)
+  const [activeCommentToolId, setActiveCommentToolId] = useState<string | null>(null)
   const questionRefs = useRef<Record<string, React.RefObject<HTMLDivElement | null>>>({})
   const contentRef = useRef<HTMLDivElement>(null)
 
@@ -389,6 +393,10 @@ export default function DocumentCanvas() {
     setIsGlobalSidebarOpen(prev => !prev)
   }, [])
 
+  const openGlobalSidebar = useCallback(() => {
+    setIsGlobalSidebarOpen(true)
+  }, [])
+
   const progress = Math.round(((currentStep) / 7) * 100)
 
   return (
@@ -431,7 +439,9 @@ export default function DocumentCanvas() {
         {/* [Velt] Header tools: Presence and Comments Sidebar Button */}
         <Header
           toggleGlobalSidebar={toggleGlobalSidebar}
+          openGlobalSidebar={openGlobalSidebar}
           isGlobalSidebarOpen={isGlobalSidebarOpen}
+          setActiveCommentToolId={setActiveCommentToolId}
         />
       </div>
 
@@ -605,6 +615,7 @@ export default function DocumentCanvas() {
                   sectionRef={questionRefs.current[question.id]}
                   value={answers[question.id] || ''}
                   onChange={(value) => handleAnswerChange(question.id, value)}
+                  activeCommentToolId={activeCommentToolId}
                 />
               ))}
             </div>
@@ -621,6 +632,8 @@ export default function DocumentCanvas() {
               sortBy="createdAt"
               embedMode={true}
               focusedThreadMode={true}
+              defaultMinimalFilter="reset"
+              openAnnotationInFocusMode={true}
             />
           </div>
         )}

apps/react/self-hosting/forms/page-mode-demo/components/header/header.tsx

@@ -1,35 +1,76 @@
 'use client'
 
 import VeltTools from '@/components/velt/VeltTools'
+import { useCommentUtils, useCommentEventCallback, useVeltEventCallback, VeltSidebarButton, useVeltClient } from '@veltdev/react';
+import { GetCommentAnnotationsResponse } from '@veltdev/types';
+import { useEffect } from 'react';
 
 interface HeaderProps {
     toggleGlobalSidebar: () => void
+    openGlobalSidebar: () => void
     isGlobalSidebarOpen: boolean
+    setActiveCommentToolId: (annotationId: string | null) => void
 }
 
 export default function Header({
     toggleGlobalSidebar,
-    isGlobalSidebarOpen
+    openGlobalSidebar,
+    isGlobalSidebarOpen,
+    setActiveCommentToolId
 }: HeaderProps) {
+
+    const commentToolClickedCallback = useCommentEventCallback('commentToolClick');
+    const commentUtils = useCommentUtils();
+    const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
+    const sidebarButtonClickedCallback = useCommentEventCallback('sidebarButtonClick');
+    const commentBubbleClickedCallback = useCommentEventCallback('commentBubbleClicked');
+    const { client } = useVeltClient();
+
+    useEffect(() => {
+        if (veltButtonClickEventData) {
+            if (veltButtonClickEventData?.buttonContext?.clickedButtonId === 'remove-page-mode-composer-button') {
+                commentUtils?.clearPageModeComposerContext();
+            }
+        }
+    }, [veltButtonClickEventData, commentUtils]);
+
+    useEffect(() => {
+        if (commentToolClickedCallback) {
+            openGlobalSidebar();
+            if (commentUtils) {
+                commentUtils?.setContextInPageModeComposer(commentToolClickedCallback?.context);
+                commentUtils?.focusPageModeComposer();
+            }
+            setActiveCommentToolId(commentToolClickedCallback?.context?.questionId);
+        }
+    }, [commentToolClickedCallback, commentUtils, client, setActiveCommentToolId]);
+
+    useEffect(() => {
+        if (sidebarButtonClickedCallback) {
+            toggleGlobalSidebar();
+            commentUtils?.clearPageModeComposerContext();
+            setActiveCommentToolId(null);
+        }
+    }, [sidebarButtonClickedCallback, commentUtils, client, setActiveCommentToolId]);
+
+    useEffect(() => {
+        if (commentBubbleClickedCallback && commentUtils) {
+            openGlobalSidebar();
+            setTimeout(() => {
+                commentUtils.selectCommentByAnnotationId(commentBubbleClickedCallback.annotationId);
+            }, 0);
+            setActiveCommentToolId(commentBubbleClickedCallback.commentAnnotation?.context?.questionId);
+        }
+    }, [commentBubbleClickedCallback, commentUtils, client, setActiveCommentToolId]);
+
     return (
         <div className="flex items-center gap-[12px]">
             {/* [Velt] Show online users/collaborators */}
             <VeltTools />
             {/* Custom button to toggle embedded comments sidebar */}
-            <div className='privado-comment-sidebar-button'>
-                <button onClick={toggleGlobalSidebar} className={`privado-comment-sidebar-button-left-icon ${isGlobalSidebarOpen ? 'privado-comment-sidebar-button-left-icon--active' : ''}`}>
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <g clipPath="url(#clip0_163_2154)">
-                            <path d="M2.82188 14.3819C2.74905 14.4431 2.66025 14.4823 2.56591 14.4949C2.47158 14.5074 2.37562 14.4928 2.28931 14.4527C2.20301 14.4126 2.12994 14.3487 2.07869 14.2685C2.02744 14.1883 2.00014 14.0952 2 14V4C2 3.86739 2.05268 3.74021 2.14645 3.64645C2.24021 3.55268 2.36739 3.5 2.5 3.5H13.5C13.6326 3.5 13.7598 3.55268 13.8536 3.64645C13.9473 3.74021 14 3.86739 14 4V12C14 12.1326 13.9473 12.2598 13.8536 12.3536C13.7598 12.4473 13.6326 12.5 13.5 12.5H5.15625C5.03847 12.5 4.92448 12.5416 4.83437 12.6175L2.82188 14.3819Z" stroke="#754CFF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                            <path d="M2.82188 14.3819C2.74905 14.4431 2.66025 14.4823 2.56591 14.4949C2.47158 14.5074 2.37562 14.4928 2.28931 14.4527C2.20301 14.4126 2.12994 14.3487 2.07869 14.2685C2.02744 14.1883 2.00014 14.0952 2 14V4C2 3.86739 2.05268 3.74021 2.14645 3.64645C2.24021 3.55268 2.36739 3.5 2.5 3.5H13.5C13.6326 3.5 13.7598 3.55268 13.8536 3.64645C13.9473 3.74021 14 3.86739 14 4V12C14 12.1326 13.9473 12.2598 13.8536 12.3536C13.7598 12.4473 13.6326 12.5 13.5 12.5H5.15625C5.03847 12.5 4.92448 12.5416 4.83437 12.6175L2.82188 14.3819Z" fill="#754CFF" />
-                        </g>
-                        <defs>
-                            <clipPath id="clip0_163_2154">
-                                <rect width="16" height="16" fill="white" />
-                            </clipPath>
-                        </defs>
-                    </svg>
-                </button>
+
+            <div className={`privado-comment-sidebar-button ${isGlobalSidebarOpen ? 'privado-comment-sidebar-button--active' : ''}`}>
+                <VeltSidebarButton></VeltSidebarButton>
                 <div className='privado-comment-sidebar-button-divider'></div>
                 <div className='privado-comment-sidebar-button-right-icon'>
                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

apps/react/self-hosting/forms/page-mode-demo/components/velt/VeltCollaboration.tsx

@@ -1,9 +1,9 @@
 "use client";
+import { useAppUser } from "@/app/userAuth/useAppUser";
 import { useVeltClient, VeltComments } from "@veltdev/react";
+import { useEffect } from "react";
 import VeltInitializeDocument from "./VeltInitializeDocument";
 import { VeltCustomization } from "./ui-customization/VeltCustomization";
-import { useEffect } from "react";
-import { useAppUser } from "@/app/userAuth/useAppUser";
 
 export function VeltCollaboration() {
   const { isUserLoggedIn } = useAppUser();
@@ -17,6 +17,7 @@ export function VeltCollaboration() {
     }
   }, [isUserLoggedIn, client]);
 
+
   return (
     <>
       <VeltInitializeDocument />
@@ -28,7 +29,11 @@ export function VeltCollaboration() {
         textMode={false}
         commentPinHighlighter={false}
         dialogOnHover={false}
-        groupMatchedComments={true}
+        // groupMatchedComments={true}
+        autoCompleteScrollConfig={{
+            itemSize: 32,
+        }}
+        assignToType='checkbox'
       />
       <VeltCustomization />
     </>

apps/react/self-hosting/forms/page-mode-demo/components/velt/ui-customization/VeltAutocompleteOptionWf.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { VeltAutocompleteOptionWireframe } from "@veltdev/react";
+import { CheckIcon } from './VeltIcons';
+
+const VeltAutocompleteOptionWf = () => {
+    return (
+        <VeltAutocompleteOptionWireframe>
+            <div className="privado-autocomplete-option-wrapper">
+                <VeltAutocompleteOptionWireframe.Icon />
+                <VeltAutocompleteOptionWireframe.Name />
+                <CheckIcon />
+            </div>
+        </VeltAutocompleteOptionWireframe>
+    );
+};
+
+export default VeltAutocompleteOptionWf;