# Office Hour #47: Model Selector Overhaul & Smarter Chat

### 📺 Quick Recap

Office Hour #47 focused on a major **Model Selector redesign** and a set of targeted **Chat improvements** — making it easier than ever to find the right model, understand its capabilities at a glance, and attach files intelligently.

Here's what shipped:

**Model Selector**

* Redesigned **3-column layout** — provider list, model list, and model settings always visible side by side
* **Max Input / Max Output token counts** displayed for every model
* **Vision** and **Reasoning** capability icons shown inline next to model names
* **Provider icons** in the left-hand provider list for faster visual scanning
* Automatic scroll to the currently selected model when the selector opens

**Chat**

* Image uploads are now **restricted to Vision-capable models** only — no more silent failures
* Added support for **.json file attachments**
* File attachments now render as **cards** (file name + type) instead of raw text

**Bug Fixes**

* Agent chat no longer stops responding when a file is attached
* Unsupported file types and oversized files are now filtered before sending — eliminating the silent hang that occurred after uploading incompatible documents
* Telegram publishing integration restored after a platform outage

***

### 🔍 What Changed & Why

#### Model Selector — New 3-Column Layout

The previous selector stacked model details on top of settings, forcing users to scroll and lose context. The new **three-panel design** keeps everything visible at once:

| Panel      | Content                                                           |
| ---------- | ----------------------------------------------------------------- |
| **Left**   | Provider list with provider icons                                 |
| **Center** | Model list with capability badges and token limits                |
| **Right**  | Model settings (Temperature, Max Output, Max Input) — always open |

This means you can compare models from different providers without collapsing the settings panel, and you can tune parameters while the full model list stays in view.

#### Token Limit Visibility

Each model now surfaces its **Max Input** and **Max Output** token counts directly in the selector. This answers a common question before you even start a conversation — no more switching to external documentation to check context window sizes.

#### Vision & Reasoning Icons

Two new inline badges appear next to model names:

* 👁 **Vision** — model accepts image inputs
* 🧠 **Reasoning** — model supports extended chain-of-thought / reasoning mode

These icons make capability discovery instant, especially when evaluating newer or less-familiar models.

#### Auto-Scroll to Selected Model

When you open the Model Selector, it now automatically scrolls the center panel to the **currently active model**. Previously, opening the selector on a model deep in the list left you at the top, requiring a manual scroll to confirm your selection.

***

#### Chat — Vision-Gated Image Uploads

You can now only attach images when the active model supports Vision. If the current model does not have the Vision badge, the image upload button is disabled. This prevents a frustrating silent failure where images were accepted by the UI but ignored or errored out at inference time.

To use image attachments, switch to any model marked with the 👁 Vision icon.

#### JSON File Support

The file attachment picker now accepts `.json` files alongside the previously supported formats. This is useful for passing structured data — API responses, configuration payloads, dataset samples — directly into a conversation without copy-pasting.

#### File Attachment Cards

Attached files now render as compact **cards** showing:

* File name
* File type label

Previously, attachments appeared as raw text paths or unformatted strings, making it easy to lose track of what was attached in longer conversations. The card format makes attachments immediately recognizable at a glance.

***

### 🐛 Bug Fixes

#### Agent Chat Stops Responding with File Attachments

Attaching a file to an agent chat session was causing the agent to stop responding entirely — no error message, no reply, just silence. This has been fixed. Agent conversations now continue normally regardless of whether a file is attached.

#### File Type & Size Filtering Prevents Silent Hangs

A related issue caused the agent to hang silently when a user uploaded a document in an unsupported format or above the size limit. The root cause was that the file was accepted by the UI but then rejected silently downstream.

The fix: **unsupported file types and oversized files are now filtered out before the message is sent.** If a file doesn't meet the requirements, you'll see clear feedback immediately — before any request is made — rather than waiting for a response that never comes.

**Supported attachment types** in agent chat: plain text, PDF, images (on Vision-capable models), JSON, and common document formats. Files must be within the per-file size limit.

#### Telegram Publishing Restored

The Telegram publishing integration was down due to a platform-side outage. The connection has been restored and Telegram remains a fully supported publishing channel for agent outputs and workflow triggers.

***

### 🛠 How to Use the New Model Selector

1. Click the **Model** button in the top bar of any Agent or Chat session
2. Browse providers in the **left panel** — provider icons help you orient quickly
3. Select a model in the **center panel** — check the Vision / Reasoning badges and token limits before committing
4. Adjust **Temperature**, **Max Output**, and **Max Input** in the **right panel** without losing your place in the model list
5. Click outside the selector or press Escape to confirm and return to your conversation

🎥 Watch the full session:

{% embed url="<https://youtu.be/ZaO1WpdjjRI?si=rZHbGMc4SK_GWtNe>" %}

***

#### 🚀 6 Workflow Blueprint Prompts <a href="#id-6-workflow-blueprint-prompts" id="id-6-workflow-blueprint-prompts"></a>

Copy any of the prompts below into **Claude Code** (with the **AgenticFlow CLI** installed) to deploy a fully working workflow in minutes — no manual node-wiring required.

**1. RSS Digest → Email**

> Using the AgenticFlow CLI, deploy the rss-digest-email blueprint. Use the Hacker News RSS feed (<https://hnrss.org/frontpage>) as the source. Set topic to "Hacker News", max\_items to 5, and recipient\_email to your own email.
>
> Deploy, run once, show me the 5-item digest that was generated.
>
> Leave the workflow deployed. Print the Web UI link. One-line note: why this rung of the composition ladder?

***

**2. Job Description Writer**

> Using the AgenticFlow CLI, deploy the job-description-writer blueprint. Use these inputs:
>
> Role: Senior Data Engineer | Seniority: Senior\
> Responsibilities: Design and maintain data pipelines. Build ETL workflows in Python. Own data quality monitoring.\
> Stack: Python, Spark, dbt, Snowflake, Airflow, AWS\
> Company blurb: Series B fintech building real-time credit risk infrastructure.\
> Location: Remote (US/EU)
>
> Deploy, run once, show me the full job description.
>
> Leave the workflow deployed. Print the Web UI link.\
> One-line note: why this rung of the composition ladder?

***

**3. Contract Reviewer**

> Using the AgenticFlow CLI, deploy the contract-reviewer blueprint. Paste in this clause-heavy freelancer contract:
>
> "Payment: Client will pay within 90 days of invoice. IP Ownership: All work product including pre-existing tools shall be exclusive property of Client. Termination: Client may terminate without notice or payment for delivered work. Non-Compete: Provider shall not work in any industry for 2 years post-termination. Liability cap: $100."
>
> Party role: Service Provider (Freelancer). Jurisdiction: California, USA.
>
> Deploy, run once, show me the red flags and negotiation checklist.
>
> Leave the workflow deployed. Print the Web UI link.\
> One-line note: why this rung of the composition ladder?

***

**4. Invoice Parser**

> Using the AgenticFlow CLI, deploy the invoice-parser blueprint. Parse this invoice text:
>
> "Invoice #INV-2025-0042 | Date: May 15 2025 | Due: June 14 2025\
> From: Acme Design Studio, <billing@acmedesign.com>\
> To: TechCorp Inc.\
> UI/UX Design (40h × $150) = $6,000 | Prototype Dev (20h × $150) = $3,000 | Revisions (5h × $150) = $750\
> Subtotal: $9,750 | Tax 8.5%: $828.75 | Total: $10,578.75 | Net 30"
>
> Currency: USD.
>
> Deploy, run once, show me the extracted JSON fields.
>
> Leave the workflow deployed. Print the Web UI link.\
> One-line note: why this rung of the composition ladder?

***

**5. Changelog Writer**

> Using the AgenticFlow CLI, deploy the changelog-writer blueprint. Use these raw commits:
>
> "feat: add dark mode toggle to settings\
> fix: login button unresponsive on mobile Safari\
> feat: export dashboard data to CSV\
> fix: memory leak in websocket connection handler\
> perf: reduce initial bundle size by 35% with code splitting\
> feat: add two-factor authentication via SMS and authenticator app"
>
> Version: v2.5.0. Product: MyApp. Audience: end users.
>
> Deploy, run once, show me the formatted changelog.
>
> Leave the workflow deployed. Print the Web UI link.\
> One-line note: why this rung of the composition ladder?

***

**6. Email Classify & Draft Reply**

> Using the AgenticFlow CLI, deploy the email-classify-reply blueprint. Use this inbound email:
>
> "Hi, I signed up for the Pro plan last week but I was charged twice on my credit card. Please refund the duplicate charge ASAP. My account email is <john@acme.com> — John"
>
> Sender: John | Your name: Support Team | Company: SaaS Co.
>
> Deploy, run once, show me the classification JSON and the drafted reply.
>
> Leave the workflow deployed. Print the Web UI link.\
> One-line note: why this rung of the composition ladder?

***

### 🔗 Get Started

* **Try AgenticFlow free:** <https://agenticflow.ai/>
* **Model library overview:** <https://docs.agenticflow.ai/>
* **Latest changelog:** <https://docs.agenticflow.ai/changelog>
* **Join our Discord:** <https://qra.ai/discord>
* **Found a bug?** Email <support@agenticflow.ai> with a reproducible case — the team will prioritize it.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.agenticflow.ai/changelog/office-hour-47-model-selector-and-chat-upgrades.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
