> For the complete documentation index, see [llms.txt](https://klassdocs.gitbook.io/klassapp-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://klassdocs.gitbook.io/klassapp-documentation/packages/toshi-ui.md).

# KlassApp Toshi UI

Reusable UI components for Toshi — the KlassApp AI assistant. Presentation only, no business logic.

## Components

### Suggestion Chips

A horizontal scrollable row of tappable suggestion chips shown above the chat input.

```
@include('toshi-ui::components.suggestion-chips', [
    'suggestions' => [
        ['icon' => '📋', 'label' => 'Record attendance'],
        ['icon' => '💳', 'label' => 'Check fee balance'],
    ],
    'inputId' => 'toshi-input-panel',
    'wireKey' => 'sc',
])
```

**Props:**

| Prop          | Type   | Default               | Description                                                 |
| ------------- | ------ | --------------------- | ----------------------------------------------------------- |
| `suggestions` | array  | `[]`                  | Array of `['icon' => str, 'label' => str]` chips to display |
| `inputId`     | string | `'toshi-input-panel'` | ID of the textarea/input to pre-fill on click               |
| `wireKey`     | string | `'sc'`                | Prefix for Livewire `wire:key` attributes                   |

**Behavior:**

* Chips are hidden automatically when used via Alpine (`x-data="{ used: new Set() }"`)
* Clicking a chip pre-fills the target input via `input.value = label` + dispatches `input` event
* Used chips are dimmed via `.toshi-chip-used` CSS class (opacity 0.5)

### Tool Confirmation Card

A structured card displayed when a write action awaits user confirmation.

```
@include('toshi-ui::components.tool-confirm-card', [
    'toolName' => 'Add Student',
    'toolIcon' => '👤',
    'params' => [
        ['label' => 'Name', 'value' => 'Grace Nakato'],
        ['label' => 'Class', 'value' => 'Primary 4'],
    ],
    'state' => 'pending',   // 'pending' or 'cancelled'
    'wireKey' => 'tpc',
    'confirmMethod' => 'confirmYes',
    'cancelMethod' => 'cancelAction',
    'cancelParam' => md5('some message'),
])
```

**Props:**

| Prop            | Type   | Default        | Description                                                              |
| --------------- | ------ | -------------- | ------------------------------------------------------------------------ |
| `toolName`      | string | `'Action'`     | Human-readable action name                                               |
| `toolIcon`      | string | `'⚡'`          | Emoji/icon for the action                                                |
| `params`        | array  | `[]`           | Array of `['label' => str, 'value' => str]` parameter rows               |
| `state`         | string | `'pending'`    | `'pending'` for active card with buttons, `'cancelled'` for dimmed state |
| `wireKey`       | string | `'tcc'`        | Prefix for Livewire `wire:key`                                           |
| `confirmMethod` | string | `'confirmYes'` | Livewire method for confirm action                                       |
| `cancelMethod`  | string | `'confirmNo'`  | Livewire method for cancel action                                        |
| `cancelParam`   | string | `''`           | Parameter passed to cancel method                                        |

## States

Both components have two states:

* **Default** — active/interactive
* **Used/Cancelled** — dimmed after interaction

## CSS

Both components rely on CSS classes in `public/css/dashboard-refresh.css`:

* `.toshi-chip-suggestion`, `.toshi-suggestions-*` for suggestion chips
* `.toshi-confirm-card`, `.toshi-confirm-*` for tool confirmation card

## Design Convention

All future Toshi UI components should go through **Open Design** first:

1. Write a structured brief (audience, tone, brand tokens, specs, states)
2. Send via Open Design daemon (agent: `opencode`, model: `opencode-go/deepseek-v4-flash`)
3. Review the generated artifact and iterate if needed
4. Implement from the approved design
5. Extract into this package for reuse

## No Business Logic Dependency

These components do NOT import, use, or depend on:

* `ToshiActionService`
* Laravel AI SDK (`Laravel\Ai`)
* Authorization gates
* Any model classes

All data is passed as props from the parent Livewire component. This keeps the package reusable for future AI-facing features (e.g., AsiliChain).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://klassdocs.gitbook.io/klassapp-documentation/packages/toshi-ui.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.