How to update one HTML element when htmx:oobAfterSwap is triggered on another?

Question

I am working on an htmx powered ai chat app, I have an endpoint /history which returns the chat history. I also have two elements which handle user input and model responses from the chat websocket respectively. As of right now, the element which contains the HTML returned by the /history endpoint only updates when I'm doing a full page refresh, but I would like it to update when the agent-responses element fires a htmx:oobAfterSwap event. Here is my relevant code:

    <div class="block is-flex is-flex-grow is-rounded chat-window p-2">
      <div class="container">
        <div
          id="chat-history"
          hx-get="{{ current_chat_name }}/history"
          hx-trigger="load"
          hx-swap="outerHTML"
          hx-target="this"
        ></div>
        <div
          id="user-input"
          class="hero has-background-grey-light has-text-primary-light"
        ></div>
        <div
          id="agent-responses"
          class="hero has-background-grey has-text-primary-light"
        ></div>
      </div>
    </div>

I have tried:

• changing #chat-history's trigger to include changed from:#agent-responses, this would be a less than ideal fix even if it did work because once streaming completions are implemented this will need to be reworked.
• adding hyperscript to the agent-responses element:

_ = "on htmx:oobAfterSwap reset() the #chat-history"

I can't get this to actually trigger on the htmx:oobAfterSwap event, but when I change that out for a clicked event I just get this error:

'reset() the #chat-history' is null

Im really trying to avoid using js and I feel like there has to be a straightforward solution to reloading a specific element on a certain event, though I can't seem to find it.