Merge pull request #11 from vgcman16/codex/create--plan-project--button

Add project planning button

README.md

@@ -87,7 +87,7 @@ project, please check the [project management guide](./PROJECT.md) to get starte
 - ✅ Deploy directly to Vercel
 - ✅ Deploy directly to Cloudflare Pages
 - ✅ Supabase Integration (@xKevIsDev)
-- ⬜ Have LLM plan the project in a MD file for better results/transparency
+- ✅ Have LLM plan the project in a MD file for better results/transparency
 - ✅ VSCode Integration with git-like confirmations
 - ⬜ Upload documents for knowledge - UI design templates, a code base to reference coding style, etc.
 - ✅ Voice prompting

app/components/chat/Chat.client.tsx

@@ -316,6 +316,8 @@ export const ChatImpl = memo(
 
       let finalMessageContent = messageContent;
 
+      let uploadArtifact = '';
+
       if (selectedElement) {
         console.log('Selected Element:', selectedElement);
 
@@ -437,14 +439,13 @@ export const ChatImpl = memo(
       const uploadedMap: { [path: string]: string } = {};
       uploadedFiles.forEach((file, idx) => {
         const text = textDataList[idx];
+
         if (text) {
           uploadedMap[file.name] = escapeBoltTags(text);
         }
       });
-      const uploadArtifact =
-        Object.keys(uploadedMap).length > 0
-          ? uploadedFilesToArtifacts(uploadedMap, `uploaded-${Date.now()}`)
-          : '';
+      uploadArtifact =
+        Object.keys(uploadedMap).length > 0 ? uploadedFilesToArtifacts(uploadedMap, `uploaded-${Date.now()}`) : '';
 
       if (modifiedFiles !== undefined) {
         const userUpdateArtifact = filesToArtifacts(modifiedFiles, `${Date.now()}`);

app/components/chat/ChatBox.tsx

@@ -296,6 +296,19 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
               onStop={props.stopListening}
               disabled={props.isStreaming}
             />
+            <IconButton
+              title="Plan project in MD file"
+              className="transition-all flex items-center gap-1 px-1.5"
+              onClick={(event) =>
+                props.handleSendMessage?.(
+                  event,
+                  'Plan the project in a plan.md file with sections: Files/components needed, Data flow, Deployment plan.',
+                )
+              }
+            >
+              <div className="i-ph:map-trifold text-xl" />
+              <span>Plan</span>
+            </IconButton>
             {props.chatStarted && (
               <IconButton
                 title="Discuss"

app/components/chat/FilePreview.tsx

@@ -7,7 +7,7 @@ interface FilePreviewProps {
   onRemove: (index: number) => void;
 }
 
-const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, textDataList, onRemove }) => {
+const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, textDataList: _textDataList, onRemove }) => {
   if (!files || files.length === 0) {
     return null;
   }

app/utils/targetFiles.ts

@@ -1,9 +1,4 @@
-import {
-  addTargetedFile,
-  removeTargetedFile,
-  isFileTargeted as isFileTargetedInternal,
-  getTargetedFiles,
-} from '~/lib/persistence/targetedFiles';
+import { isFileTargeted as isFileTargetedInternal, getTargetedFiles } from '~/lib/persistence/targetedFiles';
 import { createScopedLogger } from './logger';
 
 const logger = createScopedLogger('TargetFiles');
@@ -12,10 +7,12 @@ export function getCurrentChatId(): string {
   try {
     if (typeof window !== 'undefined') {
       const match = window.location.pathname.match(/\/chat\/([^/]+)/);
+
       if (match && match[1]) {
         return match[1];
       }
     }
+
     return 'default';
   } catch (error) {
     logger.error('Failed to get current chat ID', error);
@@ -37,6 +34,7 @@ export function hasTargetedFiles(chatId?: string): boolean {
   try {
     const currentChatId = chatId || getCurrentChatId();
     const files = getTargetedFiles();
+
     return files.some((f) => f.chatId === currentChatId);
   } catch (error) {
     logger.error('Failed to check for targeted files', error);

types/external.d.ts

@@ -0,0 +1,3 @@
+declare module 'pdfjs-dist/build/pdf.mjs';
+declare module 'pdfjs-dist/build/pdf.worker.mjs';
+declare module 'mammoth/mammoth.browser';