feat: file path above each code snippet

frontend/components/editor/AIChat/index.tsx

@@ -21,6 +21,7 @@ export default function AIChat({
   handleApplyCode,
   mergeDecorationsCollection,
   setMergeDecorationsCollection,
+  projectName,
 }: AIChatProps) {
   // Initialize socket and messages
   const { socket } = useSocket()
@@ -152,7 +153,8 @@ export default function AIChat({
       activeFileContent,
       false,
       templateType,
-      files
+      files,
+      projectName
     )
   }
 

frontend/components/editor/AIChat/lib/chatUtils.ts

@@ -93,7 +93,8 @@ export const handleSend = async (
   activeFileContent: string,
   isEditMode: boolean = false,
   templateType: string,
-  files: (TFile | TFolder)[]
+  files: (TFile | TFolder)[],
+  projectName: string
 ) => {
   // Return if input is empty and context is null
   if (input.trim() === "" && !context) return
@@ -144,7 +145,8 @@ export const handleSend = async (
         activeFileContent: activeFileContent,
         isEditMode: isEditMode,
         templateType: templateType,
-        files: files, 
+        files: files,
+        projectName: projectName,
       }),
       signal: abortControllerRef.current.signal,
     })
@@ -241,3 +243,9 @@ export const looksLikeCode = (text: string): boolean => {
 
   return codeIndicators.some((pattern) => pattern.test(text))
 }
+
+// Add this new function after looksLikeCode function
+export const isFilePath = (text: string): boolean => {
+  // Match patterns like project/path/to/file.ext or project/path/to/file.ext (new file)
+  return /^[a-zA-Z0-9_-]+\/[\w/-]+\.[a-zA-Z0-9]+(\s+\(new file\))?$/.test(text)
+}

frontend/components/editor/AIChat/lib/markdownComponents.tsx

@@ -1,11 +1,11 @@
-import { Check, CornerUpLeft, X } from "lucide-react"
+import { Check, CornerUpLeft, X, FileText } from "lucide-react"
 import monaco from "monaco-editor"
 import { Components } from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
 import { Button } from "../../../ui/button"
 import ApplyButton from "../ApplyButton"
-import { stringifyContent } from "./chatUtils"
+import { stringifyContent, isFilePath } from "./chatUtils"
 
 // Create markdown components for chat message component
 export const createMarkdownComponents = (
@@ -126,8 +126,20 @@ export const createMarkdownComponents = (
     )
   },
   // Render markdown elements
-  p: ({ node, children, ...props }) =>
-    renderMarkdownElement({ node, children, ...props }),
+  p: ({ node, children, ...props }) => {
+    const content = stringifyContent(children)
+    
+    if (isFilePath(content)) {
+      return (
+        <div className="relative group flex items-center gap-2 px-2 py-1 bg-secondary/50 rounded-md my-2 text-xs w-fit">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <span className="font-mono">{content}</span>
+        </div>
+      )
+    }
+    
+    return renderMarkdownElement({ node, children, ...props })
+  },
   h1: ({ node, children, ...props }) =>
     renderMarkdownElement({ node, children, ...props }),
   h2: ({ node, children, ...props }) =>

frontend/components/editor/AIChat/types/index.ts

@@ -56,6 +56,7 @@ export interface AIChatProps {
   files: (TFile | TFolder)[]
   templateType: string
   templateConfig?: TemplateConfig
+  projectName: string
   handleApplyCode: (mergedCode: string) => void
   mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection
   setMergeDecorationsCollection?: (collection: undefined) => void