Fixed policy ai editor scroll (#1857)

* chore(package): lock packageManager to [email protected]

* refactor(policy): update policy details and AI assistant components for improved functionality

* feat(docs): add ai-policy-editor page to documentation

* refactor(policy): enhance layout and styling of policy details and AI assistant components

* refactor(ui): update conversation component styles for consistency

Author: Itsnotaka

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

@@ -188,8 +188,8 @@ export function PolicyContentManager({
     <div className="space-y-4">
       <Card>
         <CardContent className="p-4">
-          <div className="flex gap-4">
-            <div className="flex-1 min-w-0">
+          <div className="flex gap-4 h-[60vh]">
+            <div className="flex-1 min-w-0 h-full overflow-y-auto">
               <Tabs
                 defaultValue={displayFormat}
                 onValueChange={(format) =>
@@ -240,7 +240,7 @@ export function PolicyContentManager({
             </div>
 
             {showAiAssistant && isAiPolicyAssistantEnabled && (
-              <div className="w-80 shrink-0 min-h-[400px] self-stretch flex flex-col">
+              <div className="w-80 shrink-0 self-stretch flex flex-col overflow-hidden">
                 <PolicyAiAssistant
                   messages={messages}
                   status={status}

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

@@ -69,7 +69,7 @@ export function PolicyAiAssistant({
   };
 
   return (
-    <div className="flex h-full flex-col border-l bg-background">
+    <div className="flex h-full min-h-0 flex-col border-l bg-background">
       <div className="flex items-center justify-between border-b px-3 py-2">
         <span className="text-sm font-medium">AI Assistant</span>
         {close && (
@@ -79,7 +79,7 @@ export function PolicyAiAssistant({
         )}
       </div>
 
-      <Conversation>
+      <Conversation className="min-h-0" aria-label="Policy AI assistant conversation">
         <ConversationContent className="gap-3 p-3">
           {messages.length === 0 ? (
             <div className="text-sm text-muted-foreground py-4">

apps/app/src/app/api/policies/[policyId]/chat/route.ts

@@ -1,10 +1,10 @@
-import { getPolicyTools } from '@/app/(app)/[orgId]/policies/[policyId]/editor/tools/policy-tools';
 import { auth } from '@/utils/auth';
 import { openai } from '@ai-sdk/openai';
 import { db } from '@db';
 import { convertToModelMessages, streamText, type UIMessage } from 'ai';
 import { headers } from 'next/headers';
 import { NextResponse } from 'next/server';
+import { getPolicyTools } from '../../../../(app)/[orgId]/policies/[policyId]/editor/tools/policy-tools';
 
 export const maxDuration = 60;
 
@@ -80,6 +80,8 @@ Current Policy Content:
 ${policyContentText}
 ---
 
+IMPORTANT: This assistant is ONLY for editing policies. You MUST always use one of the available tools.
+
 Your role:
 1. Edit and improve policies when asked
 2. Ensure policies remain compliant with relevant frameworks
@@ -99,8 +101,10 @@ COMMUNICATION STYLE:
 - Be concise and direct
 - Ask clarifying questions when the user's intent is unclear
 - One sentence to explain, then act (use tool or ask question)
+- Your conversational messages to the user must be plain text only (no markdown headers, bold, italics, bullet points, or code blocks)
+- Note: The policy content in proposePolicy tool MUST still use proper markdown formatting
 
-CRITICAL MARKDOWN FORMATTING RULES (when using proposePolicy):
+CRITICAL MARKDOWN FORMATTING RULES:
 - Every heading MUST have text after the # symbols (e.g., "## Section Title", never just "##")
 - Preserve the original document structure and all sections
 - Use proper heading hierarchy (# for title, ## for sections, ### for subsections)

packages/ui/src/components/ai-elements/conversation.tsx

@@ -12,7 +12,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
     className={cn(
-      'relative flex-1 overflow-y-hidden bg-gradient-to-b from-background via-background to-muted/60',
+      'relative flex-1 overflow-hidden bg-linear-to-b from-background via-background to-muted/60',
       className,
     )}
     initial="smooth"