added support for adding files from URLs

Author: Vbitz

components/common.ts

@@ -70,6 +70,7 @@ export interface FileInfo {
     name: string;
     filename?: string;
     contents?: string;
+    url?: string;
 }
 
 export interface FileDirective extends BaseDirective {

components/directives/file.tsx

@@ -1,4 +1,8 @@
-import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import {
+    ChevronDownIcon,
+    ChevronRightIcon,
+    QuestionMarkCircleIcon,
+} from "@heroicons/react/24/outline";
 import { useState, useEffect } from "react";
 import { FileInfo } from "@/components/common";
 
@@ -10,8 +14,17 @@ export default function FileDirectiveComponent({
     onChange: (file: FileInfo) => void;
 }) {
     const [isExpanded, setIsExpanded] = useState(true);
+    const [isDocExpanded, setIsDocExpanded] = useState(false);
     const [fileContent, setFileContent] = useState(file.contents || "");
-    const inputType = file.contents !== undefined ? "content" : "filename";
+
+    // Determine input type based on file properties
+    const getInputType = () => {
+        if (file.contents !== undefined) return "content";
+        if (file.url !== undefined) return "url";
+        return "filename";
+    };
+
+    const inputType = getInputType();
 
     useEffect(() => {
         // Update local state when file changes externally
@@ -23,21 +36,57 @@ export default function FileDirectiveComponent({
     };
 
     const updateFilename = (value: string) => {
-        onChange({ ...file, filename: value, contents: undefined });
+        onChange({
+            ...file,
+            filename: value,
+            contents: undefined,
+            url: undefined,
+        });
     };
 
     const updateContents = (value: string) => {
         setFileContent(value);
-        onChange({ ...file, contents: value, filename: undefined });
+        onChange({
+            ...file,
+            contents: value,
+            filename: undefined,
+            url: undefined,
+        });
+    };
+
+    const updateUrl = (value: string) => {
+        onChange({
+            ...file,
+            url: value,
+            contents: undefined,
+            filename: undefined,
+        });
     };
 
-    const toggleInputType = (type: "content" | "filename") => {
+    const toggleInputType = (type: "content" | "filename" | "url") => {
         if (type === inputType) return;
 
         if (type === "content") {
-            onChange({ ...file, contents: fileContent, filename: undefined });
-        } else {
-            onChange({ ...file, contents: undefined, filename: file.filename || "" });
+            onChange({
+                ...file,
+                contents: fileContent,
+                filename: undefined,
+                url: undefined,
+            });
+        } else if (type === "filename") {
+            onChange({
+                ...file,
+                contents: undefined,
+                filename: file.filename || "",
+                url: undefined,
+            });
+        } else if (type === "url") {
+            onChange({
+                ...file,
+                contents: undefined,
+                filename: undefined,
+                url: file.url || "",
+            });
         }
     };
 
@@ -54,11 +103,43 @@ export default function FileDirectiveComponent({
                         <ChevronRightIcon className="h-5 w-5" />
                     )}
                 </button>
-                <h2 className="text-[#0c0e0a] font-medium">
+                <h2 className="text-[#0c0e0a] font-medium flex-1">
                     File: <span className="font-mono">{file.name}</span>
                 </h2>
+                <button
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setIsDocExpanded(!isDocExpanded);
+                    }}
+                    className="ml-2 text-[#4f7b38] hover:text-[#6aa329] transition-colors"
+                    title="Show documentation"
+                >
+                    <QuestionMarkCircleIcon className="h-5 w-5" />
+                </button>
             </div>
 
+            {isDocExpanded && (
+                <div className="px-4 py-3 bg-blue-50 border-t border-[#e6f1d6] text-sm">
+                    <h3 className="font-medium text-blue-900 mb-2">File Options</h3>
+                    <div className="space-y-2 text-blue-800">
+                        <div>
+                            <strong>Enter Content:</strong> Directly input the file content
+                            into a text area. Use this when you want to provide the exact
+                            content inline.
+                        </div>
+                        <div>
+                            <strong>Provide Filename:</strong> Reference an existing file by
+                            its path. The system will read the file from the specified
+                            location.
+                        </div>
+                        <div>
+                            <strong>Provide URL:</strong> Reference a file by its URL. The
+                            system will fetch the content from the specified web address.
+                        </div>
+                    </div>
+                </div>
+            )}
+
             {isExpanded && (
                 <div className="p-4 border-t border-[#e6f1d6]">
                     <div className="mb-4">
@@ -81,8 +162,8 @@ export default function FileDirectiveComponent({
                                 type="button"
                                 onClick={() => toggleInputType("content")}
                                 className={`px-4 py-2 text-sm rounded-md transition-colors ${inputType === "content"
-                                    ? "bg-white shadow-sm text-[#4f7b38] font-medium"
-                                    : "text-gray-600 hover:text-[#4f7b38]"
+                                        ? "bg-white shadow-sm text-[#4f7b38] font-medium"
+                                        : "text-gray-600 hover:text-[#4f7b38]"
                                     }`}
                             >
                                 Enter Content
@@ -91,12 +172,22 @@ export default function FileDirectiveComponent({
                                 type="button"
                                 onClick={() => toggleInputType("filename")}
                                 className={`px-4 py-2 text-sm rounded-md transition-colors ${inputType === "filename"
-                                    ? "bg-white shadow-sm text-[#4f7b38] font-medium"
-                                    : "text-gray-600 hover:text-[#4f7b38]"
+                                        ? "bg-white shadow-sm text-[#4f7b38] font-medium"
+                                        : "text-gray-600 hover:text-[#4f7b38]"
                                     }`}
                             >
                                 Provide Filename
                             </button>
+                            <button
+                                type="button"
+                                onClick={() => toggleInputType("url")}
+                                className={`px-4 py-2 text-sm rounded-md transition-colors ${inputType === "url"
+                                        ? "bg-white shadow-sm text-[#4f7b38] font-medium"
+                                        : "text-gray-600 hover:text-[#4f7b38]"
+                                    }`}
+                            >
+                                Provide URL
+                            </button>
                         </div>
                     </div>
 
@@ -112,7 +203,7 @@ export default function FileDirectiveComponent({
                                 placeholder="Enter file contents here..."
                             />
                         </div>
-                    ) : (
+                    ) : inputType === "filename" ? (
                         <div>
                             <label className="block mb-1 font-medium text-sm text-[#1e2a16]">
                                 Filename
@@ -127,9 +218,24 @@ export default function FileDirectiveComponent({
                                 Enter the path to an existing file
                             </p>
                         </div>
+                    ) : (
+                        <div>
+                            <label className="block mb-1 font-medium text-sm text-[#1e2a16]">
+                                URL
+                            </label>
+                            <input
+                                className="w-full px-3 py-2 border border-gray-200 rounded-md text-[#0c0e0a] focus:outline-none focus:ring-1 focus:ring-[#6aa329] focus:border-[#6aa329]"
+                                value={file.url || ""}
+                                onChange={(e) => updateUrl(e.target.value)}
+                                placeholder="https://example.com/file.txt"
+                            />
+                            <p className="mt-2 text-sm text-gray-500">
+                                Enter a URL to reference a file from the web
+                            </p>
+                        </div>
                     )}
                 </div>
             )}
         </div>
     );
-}
+}