WIP: fixed HTML form issues; components not populating correctly yet

src/backend/core/tools.py

@@ -59,11 +59,13 @@ async def analyze_competition(
         logger.info("Error: OpenAI client not initialized.")
         return ""
     try:
-        response = await ctx.deps.client.aio.models.generate_content(
+        response = ctx.deps.client.chat.completions.create(
             model=AI_MODEL,
-            contents=prompt,
+            messages=[
+                {"role": "system", "content": prompt},
+            ],
         )
-        return response.text
+        return response.choices[0].message.content
     except Exception as e:
         logger.error(f"Error analyzing competition: {e}")
         return f"Error analyzing competition: {e}"
@@ -84,7 +86,7 @@ async def get_reddit_insights(
     :param subreddit_name: str
     :return: str
     """
-    subreddit = ctx.deps.reddit.subreddit(subreddit_name)
+    subreddit = ctx.deps.reddit_client.subreddit(subreddit_name)
     search_results = subreddit.search(query)
 
     insights = []

src/frontend/templates/components/forms/Form.jinja

@@ -8,15 +8,15 @@ trigger: str = 'submit'
 <div class="container">
     <form id="{{ form_id }}"
           {% if method.lower() == 'get' %}
-          hx-get={{ action }}
+          hx-get="{{ action }}"
           {% elif method.lower() == 'post' %}
-          hx-post={{ action }}
+          hx-post="{{ action }}"
           {% elif method.lower() == 'put' %}
-          hx-put={{ action }}
+          hx-put="{{ action }}"
           {% elif method.lower() == 'delete' %}
-          hx-delete={{ action }}
+          hx-delete="{{ action }}"
           {% endif %}
-          hx-trigger={{ trigger }}
+          hx-trigger="{{ trigger }}"
           hx-target="#{{ target }}">
         {{ content }}
     </form>

src/frontend/templates/components/forms/Search.jinja

@@ -9,13 +9,14 @@
       target={{ target }}
       method={{ method }}>
     <div class="control">
-        <label for="search"
+        <label for="url"
                class="label">Search</label>
         <input type="url"
                class="input is-rounded"
-               id="search"
-               name="search"
-               placeholder="URL" />
+               id="url"
+               name="url"
+               placeholder="URL"
+               required />
     </div>
     {{ content }}
 </Form>

src/frontend/templates/components/snippets/js.html

@@ -1,5 +1,4 @@
-<script type="modules"
-        src="{{ url_for('static', path='/js/htmx.js') }}"></script>
+<script src="{{ url_for('static', path='/js/htmx.min.js') }}"></script>
 <script src="{{ url_for('static', path='/js/jquery.min.js') }}"></script>
 <script src="{{ url_for('static', path='/js/bulma.js') }}"></script>
 <script src="{{ url_for('static', path='/js/bulma-collapsible.min.js') }}">

src/frontend/templates/home.html

@@ -12,17 +12,19 @@
     <div class="container">
         <h1 class="title">Search Here</h1>
         <Search form_id="swotSearch"
-                action="/analyze"
+                action={{ url_for('analyze_url') }}
                 target="status"
                 method="post">
             <div class="field mt-1 pt-1">
                 <div class="control">
-                    <button type="submit"
+                    <button type="button"
                             class="button is-success"
                             hx-on:click="
                     const [status, result] = ['#status', '#result'].map(id => document.querySelector(id));
                     status.style.display = 'block';
                     result.style.display = 'none';
+
+                    htmx.trigger('#swotSearch', 'submit')
                     ">Analyze</button>
                 </div>
             </div>
@@ -31,12 +33,12 @@
 </section>
 <section class="section">
     <div class="container"
-         id="swotAnalysis">
+         id="status">
         <div class="box"
              id="status"
              hx-get='/status'
              hx-trigger='load, every 1s'
-             hx-swap='innerHTML transition: false'
+             hx-swap='innerHTML'
              style="display: none">
         </div>
         <div class="box"
@@ -54,4 +56,12 @@
         </div>
     </div>
 </section>
-{% endblock content %}
+{% endblock content %}
+{% block js_content %}
+<script>
+    document.body.addEventListener("htmx:configRequest", function(evt) {
+        console.log("HTMX Request Configured:", evt.detail);
+    });
+</script>
+
+{% endblock js_content %}

src/frontend/templates/result.html

@@ -1,3 +1,5 @@
+{% if result %}
+
 <section class="section">
     <div class="container"
          id="result-container">
@@ -30,4 +32,5 @@
             </div>
         </div>
     </div>
-</section>
+</section>
+{% endif %}

src/frontend/templates/status.html

@@ -6,8 +6,7 @@
     {% set is_loading = loop.last and not result %}
     {% set is_tool_message = message.startswith('Using tool') %}
     <div class="box">
-        {% set bg_color = 'danger' if is_error else ('dark' if is_loading else "info"
-        %}
+        {% set bg_color = 'danger' if is_error else ('dark' if is_loading else "info") %}
         {% if is_error %}
         {% set content = message.split('body:', 1)[1] %}
         {% elif is_tool_message %}
@@ -15,7 +14,7 @@
         {% else %}
         {% set content = message %}
         {% endif %}
-        <StatusResult :div_class=bg_color>{{ message }}</StatusResult>
+        <StatusResult div_class={{ bg_color }}>{{ message }}</StatusResult>
     </div>
     {% endfor %}
 </div>