Route refactoring, HTMX

chriscarrollsmith · chriscarrollsmith · commit b957892eb895 · 2025-02-03T07:16:49.000-05:00
diff --git a/main.py b/main.py
@@ -57,28 +57,42 @@ async def read_home(request: Request):
 
 @app.get("/basic-chat")
 async def read_basic_chat(request: Request, messages: list = [], thread_id: str = None):
+    # Get assistant ID from environment variables
+    load_dotenv()
+    assistant_id = os.getenv("ASSISTANT_ID")
+    
     return templates.TemplateResponse(
         "examples/basic-chat.html",
         {
             "request": request,
+            "assistant_id": assistant_id,  # Add assistant_id to template context
             "messages": messages,
             "thread_id": thread_id
         }
     )
 
 @app.get("/file-search")
 async def read_file_search(request: Request, messages: list = [], thread_id: str = None):
+    # Get assistant ID from environment variables
+    load_dotenv()
+    assistant_id = os.getenv("ASSISTANT_ID")
+    
     return templates.TemplateResponse(
         "examples/file-search.html",
         {
             "request": request,
             "messages": messages,
             "thread_id": thread_id,
+            "assistant_id": assistant_id,  # Add assistant_id to template context
         }
     )
 
 @app.get("/function-calling")
 async def read_function_calling(request: Request, messages: list = [], thread_id: str = None):
+    # Get assistant ID from environment variables
+    load_dotenv()
+    assistant_id = os.getenv("ASSISTANT_ID")
+    
     # Define the condition class map
     conditionClassMap = {
         "Cloudy": "weatherBGCloudy",
@@ -97,16 +111,23 @@ async def read_function_calling(request: Request, messages: list = [], thread_id
             "conditions": "Sunny",
             "isEmpty": True,
             "thread_id": thread_id,
-            "messages": messages
+            "messages": messages,
+            "assistant_id": assistant_id,  # Add assistant_id to template context
         }
     )
 
+
 @app.get("/all")
 async def read_all(request: Request, messages: list = [], thread_id: str = None):
+    # Get assistant ID from environment variables
+    load_dotenv()
+    assistant_id = os.getenv("ASSISTANT_ID")
+    
     return templates.TemplateResponse(
         "examples/all.html",
         {
             "request": request,
+            "assistant_id": assistant_id,  # Add assistant_id to template context
             "thread_id": thread_id,
             "messages": messages
         }
diff --git a/routers/files.py b/routers/files.py
@@ -12,7 +12,10 @@
 load_dotenv()
 assistant_id: str = os.getenv("ASSISTANT_ID")
 
-router: APIRouter = APIRouter(prefix="/assistants/{assistant_id}/files", tags=["assistants_files"])
+router: APIRouter = APIRouter(
+    prefix="/assistants/{assistant_id}/files",
+    tags=["assistants_files"]
+)
 
 # Pydantic model for DELETE request body
 class DeleteRequest(BaseModel):
@@ -40,12 +43,10 @@ async def get_or_create_vector_store(assistantId: str, client: AsyncOpenAI = Dep
 
 
 @router.get("/files/{file_id}")
-async def get_file(file_id: str, client: AsyncOpenAI = Depends(lambda: AsyncOpenAI())):
-    """
-    Endpoint to download a file by file ID.
-    """
+async def get_file(file_id: str):
     try:
         # Retrieve file metadata and content concurrently
+        client = AsyncOpenAI()
         file, file_content = await client.files.retrieve(file_id), await client.files.content(file_id)
         
         # Return the file content as a streaming response
@@ -59,19 +60,28 @@ async def get_file(file_id: str, client: AsyncOpenAI = Depends(lambda: AsyncOpen
 
 
 @router.post("/upload")
-async def upload_file(file: UploadFile = File(...), client: AsyncOpenAI = Depends(lambda: AsyncOpenAI())):
-    # Process file and upload to OpenAI
-    vector_store_id = await get_or_create_vector_store(assistant_id, client)
-    openai_file = await client.files.create(
-        file=file.file,
-        purpose="assistants"
-    )
-    await client.beta.vectorStores.files.create(vector_store_id, {
-        "file_id": openai_file.id
-    })
-    return {"message": "File uploaded successfully"}
+async def upload_file(file: UploadFile = File(...)):
+    try:
+        client = AsyncOpenAI()
+
+        # Handles multiple files through the form
+        # Process file and upload to OpenAI
+        vector_store_id = await get_or_create_vector_store(assistant_id)
+
+        openai_file = await client.files.create(
+            file=file.file,
+            purpose="assistants"
+        )
+        await client.beta.vectorStores.files.create(vector_store_id, {
+            "file_id": openai_file.id
+        })
+        return {"message": "File uploaded successfully"}
+    except Exception as e:
+        # Handle exceptions and return an HTTP error response
+        raise HTTPException(status_code=500, detail=str(e))
+
 
-@router.get("/files")
+@router.get("")
 async def list_files(client: AsyncOpenAI = Depends(lambda: AsyncOpenAI())):
     # List files in the vector store
     vector_store_id = await get_or_create_vector_store(assistant_id, client)
diff --git a/routers/messages.py b/routers/messages.py
@@ -9,9 +9,14 @@
 from utils.threads import create_thread
 
 logger: logging.Logger = logging.getLogger("uvicorn.error")
+logger.setLevel(logging.DEBUG)
 
 # Initialize the router
-router: APIRouter = APIRouter()
+router: APIRouter = APIRouter(
+    prefix="/assistants/{assistant_id}/messages",
+    tags=["assistants_messages"]
+)
+
 
 # Send a new message to a thread
 @router.post("/send_message")
diff --git a/templates/components/file-viewer.html b/templates/components/file-viewer.html
@@ -1,5 +1,7 @@
 <div class="fileViewer">
-  <div class="filesList {{ 'grow' if files|length != 0 else '' }}">
+  <div class="filesList {{ 'grow' if files|length != 0 else '' }}"
+       hx-get="/assistants/{{ assistant_id }}/files"
+       hx-trigger="every 2s">
     {% if files|length == 0 %}
       <div class="title">Attach files to test file search</div>
     {% else %}
@@ -10,25 +12,31 @@
             <span class="fileStatus">{{ file.status }}</span>
           </div>
           <span>
-            <form method="POST" action="/delete-file">
-              <input type="hidden" name="file_id" value="{{ file.file_id }}">
-              <button type="submit" class="fileDeleteIcon">
-                <!-- TrashIcon component -->
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" height="12" width="12" fill="#353740">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.15736 1.33332C4.8911 1.33332 4.65864 1.51361 4.59238 1.77149L4.4214 2.43693H7.58373L7.41275 1.77149C7.34649 1.51361 7.11402 1.33332 6.84777 1.33332H5.15736ZM8.78829 2.43693L8.54271 1.48115C8.34393 0.707516 7.64653 0.166656 6.84777 0.166656H5.15736C4.35859 0.166656 3.6612 0.707515 3.46241 1.48115L3.21683 2.43693H1.33333C1.01117 2.43693 0.75 2.6981 0.75 3.02026C0.75 3.34243 1.01117 3.6036 1.33333 3.6036H1.39207L2.10068 10.2683C2.19529 11.1582 2.94599 11.8333 3.84087 11.8333H8.15913C9.05401 11.8333 9.80471 11.1582 9.89932 10.2683L10.6079 3.6036H10.6667C10.9888 3.6036 11.25 3.34243 11.25 3.02026C11.25 2.6981 10.9888 2.43693 10.6667 2.43693H8.78829ZM9.43469 3.6036H2.56531L3.2608 10.145C3.29234 10.4416 3.54257 10.6667 3.84087 10.6667H8.15913C8.45743 10.6667 8.70766 10.4416 8.7392 10.145L9.43469 3.6036ZM4.83333 4.83332C5.1555 4.83332 5.41667 5.09449 5.41667 5.41666V8.33332C5.41667 8.65549 5.1555 8.91666 4.83333 8.91666C4.51117 8.91666 4.25 8.65549 4.25 8.33332V5.41666C4.25 5.09449 4.51117 4.83332 4.83333 4.83332ZM7.16667 4.83332C7.48883 4.83332 7.75 5.09449 7.75 5.41666V8.33332C7.75 8.65549 7.48883 8.91666 7.16667 8.91666C6.8445 8.91666 6.58333 8.65549 6.58333 8.33332V5.41666C6.58333 5.09449 6.8445 4.83332 7.16667 4.83332Z"/>
-                </svg>
-              </button>
-            </form>
+            <button hx-delete="/assistants/{{ assistant_id }}/files/delete"
+                    hx-vals='{"file_id": "{{ file.file_id }}"}'
+                    hx-target=".filesList"
+                    class="fileDeleteIcon">
+              <!-- TrashIcon component -->
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" height="12" width="12" fill="#353740">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.15736 1.33332C4.8911 1.33332 4.65864 1.51361 4.59238 1.77149L4.4214 2.43693H7.58373L7.41275 1.77149C7.34649 1.51361 7.11402 1.33332 6.84777 1.33332H5.15736ZM8.78829 2.43693L8.54271 1.48115C8.34393 0.707516 7.64653 0.166656 6.84777 0.166656H5.15736C4.35859 0.166656 3.6612 0.707515 3.46241 1.48115L3.21683 2.43693H1.33333C1.01117 2.43693 0.75 2.6981 0.75 3.02026C0.75 3.34243 1.01117 3.6036 1.33333 3.6036H1.39207L2.10068 10.2683C2.19529 11.1582 2.94599 11.8333 3.84087 11.8333H8.15913C9.05401 11.8333 9.80471 11.1582 9.89932 10.2683L10.6079 3.6036H10.6667C10.9888 3.6036 11.25 3.34243 11.25 3.02026C11.25 2.6981 10.9888 2.43693 10.6667 2.43693H8.78829ZM9.43469 3.6036H2.56531L3.2608 10.145C3.29234 10.4416 3.54257 10.6667 3.84087 10.6667H8.15913C8.45743 10.6667 8.70766 10.4416 8.7392 10.145L9.43469 3.6036ZM4.83333 4.83332C5.1555 4.83332 5.41667 5.09449 5.41667 5.41666V8.33332C5.41667 8.65549 5.1555 8.91666 4.83333 8.91666C4.51117 8.91666 4.25 8.65549 4.25 8.33332V5.41666C4.25 5.09449 4.51117 4.83332 4.83333 4.83332ZM7.16667 4.83332C7.48883 4.83332 7.75 5.09449 7.75 5.41666V8.33332C7.75 8.65549 7.48883 8.91666 7.16667 8.91666C6.8445 8.91666 6.58333 8.65549 6.58333 8.33332V5.41666C6.58333 5.09449 6.8445 4.83332 7.16667 4.83332Z"/>
+              </svg>
+            </button>
           </span>
         </div>
       {% endfor %}
     {% endif %}
   </div>
   <div class="fileUploadContainer">
-    <form method="POST" action="/upload-file" enctype="multipart/form-data">
+    <form hx-post="/assistants/{{ assistant_id }}/files/upload" 
+          hx-encoding="multipart/form-data"
+          hx-target=".filesList">
       <label for="file-upload" class="fileUploadBtn">Attach files</label>
-      <input type="file" id="file-upload" name="file-upload" class="fileUploadInput" multiple>
-      <button type="submit">Upload</button>
+      <input type="file" 
+             id="file-upload" 
+             name="file-upload" 
+             class="fileUploadInput" 
+             multiple
+             hx-trigger="change">
     </form>
   </div>
 </div>
diff --git a/templates/layout.html b/templates/layout.html
@@ -7,6 +7,8 @@
     <link rel="icon" href="{{ url_for('static', path='openai.svg') }}">
     <link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
     <link rel="favicon" href="{{ url_for('static', path='favicon.png') }}">
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
   </head>
   <body>
     {% block content %}
