Bus UI Assistant

AIPanel composes the assistant workbench.

Use it when one panel should own the thread list, transcript, approval items, attachments, model state, and draft composer together.

Public API

AIPanel(p AIPanelProps) gx.Node

When to use it

Use AIPanel for the main assistant surface in a product page. Keep provider calls, review policy, and thread routing in the host, then hand the render state to this panel.

Key props

Title, ActiveThread, Threads, Messages, Approvals, Model, ModelOptions, Attachments, Draft, OnSend, OnModelChange, OnAttachment, OnApprove, and OnReject.

Example

Loading AIPanel demo...

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  assistantui "github.com/busdk/bus-ui/pkg/assistantui"
)

node := assistantui.AIPanel(assistantui.AIPanelProps{
  Title:        "Review",
  ActiveThread:  "thread-1",
  Threads:      []assistantui.AIThreadSummary{{ID: "thread-1", Title: "Draft review"}},
  Messages:     []assistantui.AIPanelMessage{{Role: "assistant", Text: "Ready for review."}},
  Draft:        "Check the diff",
  Model:        "gpt-5",
  ModelOptions:  []assistantui.AIModelOption{{ID: "gpt-5", Label: "GPT-5"}},
})

html, err := gx.RenderHTML(node)

.gx source

In .gx source, author the visible component state as GX markup. Keep the Go API block above for the package helper or render-boundary call.

package busuiexamples

import gx "github.com/busdk/bus-gx/pkg/gx"

func AIPanelExample() gx.Node {
  return <section class="ai-panel">
  <header><h2><Text value={"Review"}></Text></h2></header>
  <article class="ai-message"><p><Text value={"Ready for review."}></Text></p></article>
  <form class="ai-composer" method="post">
    <textarea name="draft" placeholder="Check the diff"></textarea>
    <button type="submit"><Text value={"Send"}></Text></button>
  </form>
</section>
}

Return to Assistant or the Bus UI reference.