[dev] [Itsnotaka] daniel/ai-policy-editor-improv (#1939)

* feat(ai): enhance policy assistant prompts for user guidance

* chore(db): update package.json exports to include types for modules

* fix(app): change overflow style in PolicyDetails component

* fix(app): enable AI assistant by default in PolicyDetails component

---------

Co-authored-by: Daniel Fu <[email protected]>
Co-authored-by: Mariano Fuentes <[email protected]>

Author: 3 people

apps/app/src/app/(app)/[orgId]/policies/[policyId]/editor/components/PolicyDetails.tsx

@@ -90,7 +90,7 @@ export function PolicyContentManager({
   displayFormat = 'EDITOR',
   pdfUrl,
 }: PolicyContentManagerProps) {
-  const [showAiAssistant, setShowAiAssistant] = useState(false);
+  const [showAiAssistant, setShowAiAssistant] = useState(true);
   const [editorKey, setEditorKey] = useState(0);
   const [currentContent, setCurrentContent] = useState<Array<JSONContent>>(() => {
     const formattedContent = Array.isArray(policyContent)
@@ -104,7 +104,6 @@ export function PolicyContentManager({
   const [chatErrorMessage, setChatErrorMessage] = useState<string | null>(null);
   const diffViewerRef = useRef<HTMLDivElement>(null);
 
-  const isAiPolicyAssistantEnabled = true;
   const scrollToDiffViewer = useCallback(() => {
     diffViewerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }, []);
@@ -189,7 +188,7 @@ export function PolicyContentManager({
       <Card>
         <CardContent className="p-4">
           <div className="flex gap-4 h-[60vh]">
-            <div className="flex-1 min-w-0 h-full overflow-y-auto">
+            <div className="flex-1 min-w-0 h-full overflow-hidden">
               <Tabs
                 defaultValue={displayFormat}
                 onValueChange={(format) =>
@@ -206,19 +205,17 @@ export function PolicyContentManager({
                       PDF View
                     </TabsTrigger>
                   </TabsList>
-                  {!isPendingApproval &&
-                    displayFormat === 'EDITOR' &&
-                    isAiPolicyAssistantEnabled && (
-                      <Button
-                        variant={showAiAssistant ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => setShowAiAssistant((prev) => !prev)}
-                        className="gap-2"
-                      >
-                        <Sparkles className="h-4 w-4" />
-                        AI Assistant
-                      </Button>
-                    )}
+                  {!isPendingApproval && (
+                    <Button
+                      variant={showAiAssistant ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => setShowAiAssistant((prev) => !prev)}
+                      className="gap-2"
+                    >
+                      <Sparkles className="h-4 w-4" />
+                      AI Assistant
+                    </Button>
+                  )}
                 </div>
                 <TabsContent value="EDITOR" className="mt-4">
                   <PolicyEditorWrapper
@@ -239,7 +236,7 @@ export function PolicyContentManager({
               </Tabs>
             </div>
 
-            {showAiAssistant && isAiPolicyAssistantEnabled && (
+            {showAiAssistant && (
               <div className="w-80 shrink-0 self-stretch flex flex-col overflow-hidden">
                 <PolicyAiAssistant
                   messages={messages}

apps/app/src/app/(app)/[orgId]/policies/[policyId]/editor/components/ai/policy-ai-assistant.tsx

@@ -83,11 +83,16 @@ export function PolicyAiAssistant({
         <ConversationContent className="gap-3 p-3">
           {messages.length === 0 ? (
             <div className="text-sm text-muted-foreground py-4">
-              <p>Ask me to help edit this policy.</p>
+              <p>
+                I can help you edit, adapt, or check this policy for compliance. Try asking me
+                things like:
+              </p>
               <ul className="mt-2 space-y-1 text-xs">
-                <li>"Add a data retention section"</li>
-                <li>"Make this more SOC 2 compliant"</li>
-                <li>"Simplify the language"</li>
+                <li>"Adapt this for a fully remote, distributed team."</li>
+                <li>
+                  "Can I shorten the data retention timeframe and still meet SOC 2 standards?"
+                </li>
+                <li>"Modify the access control section to include contractors."</li>
               </ul>
             </div>
           ) : (

packages/db/package.json

@@ -14,8 +14,16 @@
     "typescript": "^5.9.2"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./postinstall": "./dist/postinstall.js"
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./postinstall": {
+      "import": "./dist/postinstall.js",
+      "types": "./src/postinstall.ts",
+      "default": "./dist/postinstall.js"
+    }
   },
   "bin": {
     "comp-prisma-postinstall": "./dist/postinstall.js"