Fix model picker display in ct-prompt-input (commontoolsinc#2064)

* Fix model picker display in `ct-prompt-input`

* Format

* Fix `generateObject` 400 error

* Handle `undefined` case

Author: bfollington

packages/patterns/chatbot.tsx

@@ -152,21 +152,20 @@ type ChatOutput = {
 export const TitleGenerator = recipe<
   { model?: string; messages: Array<BuiltInLLMMessage> }
 >("Title Generator", ({ model, messages }) => {
-  const titleMessages = computed(() => {
+  const previewMessage = computed(() => {
     if (!messages || messages.length === 0) return "";
 
-    const messageCount = 2;
-    const selectedMessages = messages.slice(0, messageCount).filter(Boolean);
+    const firstMessage = messages[0];
 
-    if (selectedMessages.length === 0) return "";
+    if (!firstMessage) return "";
 
-    return selectedMessages;
+    return JSON.stringify(firstMessage);
   });
 
   const { result } = generateObject({
     system:
       "Generate at most a 3-word title based on the following content, respond with NOTHING but the literal title text.",
-    messages: titleMessages,
+    prompt: previewMessage,
     model,
     schema: {
       type: "object",

packages/ui/src/v2/components/ct-prompt-input/ct-prompt-input.ts

@@ -343,6 +343,7 @@ export class CTPromptInput extends BaseElement {
         declare theme?: CTTheme;
 
         private _textareaElement?: HTMLElement;
+        private _modelSelectElement?: HTMLSelectElement;
 
         // Attachment management
         private attachments: Map<string, PromptAttachment> = new Map();
@@ -415,7 +416,11 @@ export class CTPromptInput extends BaseElement {
           this._textareaElement = this.shadowRoot?.querySelector(
             "textarea",
           ) as HTMLTextAreaElement;
+          this._modelSelectElement = this.shadowRoot?.querySelector(
+            ".model-select",
+          ) as HTMLSelectElement;
           this._updateThemeProperties();
+          this._applyModelValueToDom();
         }
 
         override updated(
@@ -438,6 +443,12 @@ export class CTPromptInput extends BaseElement {
           if (changedProperties.has("model") && this.model != null) {
             this._modelController.bind(this.model);
           }
+          if (
+            changedProperties.has("model") ||
+            changedProperties.has("modelItems")
+          ) {
+            this._applyModelValueToDom();
+          }
 
           // Manage mentions overlay based on controller state
           // The MentionController will trigger requestUpdate when state changes
@@ -737,7 +748,6 @@ export class CTPromptInput extends BaseElement {
                     ? html`
                       <select
                         class="model-select"
-                        .value="${this._modelController.getValue() || ""}"
                         @change="${this._handleModelChange}"
                         ?disabled="${this.disabled || this.pending}"
                         title="Select model"
@@ -905,6 +915,26 @@ export class CTPromptInput extends BaseElement {
           }
         }
 
+        /**
+         * Apply the current model value to the DOM select element
+         * This ensures the select element shows the correct selected option
+         */
+        private _applyModelValueToDom() {
+          // Re-query if we don't have a reference (e.g., model picker appeared after first render)
+          if (!this._modelSelectElement) {
+            this._modelSelectElement = this.shadowRoot?.querySelector(
+              ".model-select",
+            ) as HTMLSelectElement;
+          }
+
+          if (!this._modelSelectElement) return;
+
+          const currentValue = this._modelController.getValue();
+          if (currentValue != null) {
+            this._modelSelectElement.value = String(currentValue);
+          }
+        }
+
         /**
          * Mount the mentions overlay in the document body
          */