html: better formatting for input text

cmd/main.go

@@ -531,6 +531,7 @@ func (s *session) repl(ctx context.Context, initialQuery string, initialBlocks [
 	for {
 		if query == "" {
 			input := ui.NewInputTextBlock()
+			input.SetEditable(true)
 			s.doc.AddBlock(input)
 
 			userInput, err := input.Observable().Wait()

pkg/ui/blocks.go

@@ -139,6 +139,9 @@ type InputTextBlock struct {
 
 	// text is populated when we have input from the user
 	text Observable[string]
+
+	// editable is true if the input text block is editable
+	editable bool
 }
 
 func NewInputTextBlock() *InputTextBlock {
@@ -157,6 +160,20 @@ func (b *InputTextBlock) Observable() *Observable[string] {
 	return &b.text
 }
 
+func (b *InputTextBlock) SetEditable(editable bool) *InputTextBlock {
+	b.editable = editable
+	b.doc.blockChanged(b)
+	return b
+}
+
+func (b *InputTextBlock) Editable() bool {
+	return b.editable
+}
+
+func (b *InputTextBlock) Text() (string, error) {
+	return b.text.Get()
+}
+
 // InputOptionBlock is used to prompt for a selection from multiple choices
 type InputOptionBlock struct {
 	doc *Document

pkg/ui/html/htmlui.go

@@ -138,6 +138,7 @@ func (u *HTMLUserInterface) handlePOSTSendMessage(w http.ResponseWriter, req *ht
 	}
 
 	inputBlock.Observable().Set(q, nil)
+	inputBlock.SetEditable(false)
 
 	var bb bytes.Buffer
 	bb.WriteString("ok")

pkg/ui/html/templates/input_text_block.html

@@ -1,3 +1,9 @@
+{{ if .Editable }}
 <div>
     <input type="text" name="q" hx-post="/send-message" placeholder="How can I help?">
 </div>
+{{ else }}
+<div>
+    <span>{{ .Text }}</span>
+</div>
+{{ end }}

pkg/ui/observable.go

@@ -75,6 +75,13 @@ func (o *Observable[T]) Set(t T, err error) {
 	o.sendChangeHoldingLock()
 }
 
+func (o *Observable[T]) Get() (T, error) {
+	o.mutex.Lock()
+	defer o.mutex.Unlock()
+
+	return o.value, o.err
+}
+
 func (o *Observable[T]) sendChangeHoldingLock() {
 	for i, s := range o.subscriptions {
 		if s == nil {