Improve proof reading

apps/web/components/dialogs/ai-expand-concept-prompt-dialog.component.tsx

@@ -71,7 +71,7 @@ export default function AiExpandConceptPromptDialogComponent({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+            <div className="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all w-full mx-4 sm:mx-0 sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
               <div className="bg-white dark:bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
@@ -94,7 +94,7 @@ export default function AiExpandConceptPromptDialogComponent({
                     <div className="mt-5 w-full">
                       <div className="mt-1 space-y-1">
                         <dd className="mt-1 text-sm text-gray-900">
-                          <div className="rounded-md border border-gray-200 dark:border-gray-600 dark:divide-gray-600 p-4">
+                          <div className="rounded-md border border-gray-200 dark:border-gray-600 dark:divide-gray-600 p-4 max-h-[60vh] overflow-y-auto">
                             {isLoading && !completion && <SpinnerWithSpacing />}
 
                             <div className="text-black dark:text-white prose dark:prose-invert prose-sm max-w-none">

apps/web/components/dialogs/ai-prood-read-dialog.component.tsx

@@ -6,7 +6,17 @@ import { Fragment, useEffect, useRef } from "react";
 import { Streamdown } from "streamdown";
 import { notifyError } from "../core/toast.component";
 
-export default function AiProofReadDialogComponent({ open, setOpen, content }) {
+export default function AiProofReadDialogComponent({
+  open,
+  setOpen,
+  content,
+  onReplace,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  content: string;
+  onReplace?: (content: string) => void;
+}) {
   const cancelButtonRef = useRef(null);
 
   const { completion, complete, isLoading, setCompletion } = useCompletion({
@@ -65,7 +75,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+            <div className="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all w-full mx-4 sm:mx-0 sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
               <div className="bg-white dark:bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
@@ -88,7 +98,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
                     <div className="mt-5 w-full">
                       <div className="mt-1 space-y-1">
                         <dd className="mt-1 text-sm text-gray-900">
-                          <div className="rounded-md border border-gray-200 dark:border-gray-600 dark:divide-gray-600 p-4">
+                          <div className="rounded-md border border-gray-200 dark:border-gray-600 dark:divide-gray-600 p-4 max-h-[60vh] overflow-y-auto">
                             {isLoading && !completion && <SpinnerWithSpacing />}
 
                             <div className="text-black dark:text-white prose dark:prose-invert prose-sm max-w-none">
@@ -103,6 +113,19 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
               </div>
 
               <div className="bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                {onReplace && (
+                  <button
+                    type="button"
+                    disabled={isLoading || !completion}
+                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                    onClick={() => {
+                      onReplace(completion);
+                      setOpen(false);
+                    }}
+                  >
+                    Replace Content
+                  </button>
+                )}
                 <button
                   type="button"
                   className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"

apps/web/components/forms/post-form.component.tsx

@@ -702,6 +702,9 @@ export default function PostFormComponent({
         setOpen={(open: boolean) => {
           setPromptProofRead(open);
         }}
+        onReplace={(content: string) => {
+          formik.setFieldValue("content", content);
+        }}
       />
     </div>
   );

apps/web/pages/api/ai/free-changelog-generator.ts

@@ -26,6 +26,8 @@ You are a changelog writer. Generate a well-formatted changelog based on the pro
 Format the output as markdown with clear sections and bullet points.
 Tone: ${tone === "casual" ? "Write in a casual, friendly tone" : "Write in a formal, professional tone"}
 ${intro === "Add a short intro and outro, make sure its generic and polite." ? "Include a brief intro and outro paragraph." : "Do not add any introduction or conclusion - just the changelog content."}
+
+IMPORTANT: Never remove any images, image tags, or image URLs from the input. All images must be preserved exactly as they appear in the original content.
 </instructions>`,
         prompt: `<input>
 ${content}

apps/web/pages/api/ai/proof-read.ts

@@ -19,6 +19,8 @@ const proofRead = withAuth(async (req, res) => {
         },
         prompt: `Proofread and improve the following changelog content. Fix any grammar, spelling, or clarity issues while maintaining the original meaning and tone. Return only the improved text without any explanations.
 
+IMPORTANT: Never remove any images, image tags, or image URLs from the content. All images must be preserved exactly as they appear in the original.
+
 Content:
 ${content}`,
       });

apps/web/utils/changelog-ai.ts

@@ -77,6 +77,10 @@ Example: "Created a changelog highlighting the new user authentication system wi
 
 Keep it to 1-2 sentences. Be specific about the main features/changes covered.
 </summary-rules>
+
+<media-rules>
+IMPORTANT: Never remove any images, videos, embeds, or other media from the content unless the user explicitly requests their removal. All media must be preserved exactly as they appear.
+</media-rules>
 </instructions>
 
 ${