Ai Input
用来写给 AI 的内容，也可以附上文件。宽度跟着父级走：不到 560px 时文字在上、按钮在下，最窄 374px，最宽 832px。
import 'genv4/ai-input/ai-input.js';没有文字时发送按钮不可点。点左侧加号可以上传文件。
AI can make mistakes and may not be suitable for some minors.
<md-ai-input></md-ai-input>出现清除按钮，发送按钮可点。
AI can make mistakes and may not be suitable for some minors.
<md-ai-input value="Help me find travel inspiration for Italy on a budget."></md-ai-input>文字变高，超过 108px 后在框内滚动。
AI can make mistakes and may not be suitable for some minors.
AI can make mistakes and may not be suitable for some minors.
<md-ai-input listening></md-ai-input>按钮变为停止，清除禁用，文字不能改。回复结束时由页面把 thinking 设回 false。
AI can make mistakes and may not be suitable for some minors.
<md-ai-input thinking value="Help me find travel inspiration for Italy on a budget."></md-ai-input>父级窄于 560px 时换成窄布局。
AI can make mistakes and may not be suitable for some minors.
下表适用于 <md-ai-input>。
| 属性 | HTML 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
value | value | string | '' | 输入框里的文字。只有空格时视为没有文字。 |
placeholder | placeholder | string | 'Ask anything or search...' | 没有文字时的占位内容。听写中改为 i'm listening...。 |
disclaimer | disclaimer | string | 'AI can make mistakes and may not be suitable for some minors.' | 输入框下方的说明。 |
thinking | thinking | boolean | false | 发送进行中。按钮变为停止，文字不可改，清除禁用。回复结束时由页面设回 false。 |
listening | listening | boolean | false | 听写外观。页面可以设置，麦克风点击也会切换。组件不调用语音接口。 |
files | readonly File[] | undefined | 已选择的文件。只读，选择或移除文件时更新。 |
| Event | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
send | CustomEvent | Yes | Yes | 点击发送。detail 含 value 和 files |
interrupt | CustomEvent | Yes | Yes | 发送中点击停止 |
files-change | CustomEvent | Yes | Yes | 已选文件变化。detail 含 files |
用组件 CSS 变量覆盖。下面只列出 Sass 里标记为支持的变量。
Ai Input <md-ai-input>
Link to “Ai Input <md-ai-input>” | 变量 | 默认值 |
|---|---|
--md-ai-input-empty-send-color | hsl(from var(--md-sys-color-on-surface, #1c1b1b) h s l / 10%) |
--md-ai-input-empty-send-icon-color | --md-sys-color-on-surface |
--md-ai-input-field-color | --md-sys-color-surface |
--md-ai-input-field-height | 48px |
--md-ai-input-field-shape | 24px |
--md-ai-input-file-container-color | --md-sys-color-secondary-container |
--md-ai-input-file-height | 48px |
--md-ai-input-file-icon-background-color | --md-sys-color-surface |
--md-ai-input-file-label-color | --md-sys-color-on-secondary-container |
--md-ai-input-file-shape | 24px |
--md-ai-input-file-width | 162px |
--md-ai-input-focus-outline-color | --md-sys-color-primary |
--md-ai-input-frame-shape | --md-sys-shape-corner-medium |
--md-ai-input-image-shape | --md-sys-shape-corner-medium |
--md-ai-input-image-size | 96px |
--md-ai-input-input-text-color | --md-sys-color-on-surface |
--md-ai-input-input-text-font | --md-sys-typescale-body-medium-font |
--md-ai-input-input-text-line-height | --md-sys-typescale-body-medium-line-height |
--md-ai-input-input-text-size | --md-sys-typescale-body-medium-size |
--md-ai-input-input-text-weight | --md-sys-typescale-body-medium-weight |
--md-ai-input-listening-field-color | --md-sys-color-primary-container |
--md-ai-input-listening-outline | linear-gradient(90deg, #5c8dff, #a079ff, #d06ad6, #eb6296, #ff7257, #eb6296, #d06ad6, #a079ff, #5c8dff) |
--md-ai-input-max-width | 832px |
--md-ai-input-menu-container-color | --md-sys-color-surface-container |
--md-ai-input-mic-background | linear-gradient(90deg, #5c8dff, #a079ff, #d06ad6) |
--md-ai-input-mic-icon-color | --md-sys-color-surface |
--md-ai-input-min-width | 374px |
--md-ai-input-narrow-frame-height | 112px |
--md-ai-input-narrow-send-size | 40px |
--md-ai-input-send-container-color | --md-sys-color-primary |
--md-ai-input-send-icon-color | --md-sys-color-on-primary |
--md-ai-input-send-size | 48px |
--md-ai-input-supporting-text-color | hsl(from var(--md-sys-color-on-surface, #1c1b1b) h s l / 38%) |
--md-ai-input-supporting-text-font | --md-sys-typescale-body-small-font |
--md-ai-input-supporting-text-line-height | --md-sys-typescale-body-small-line-height |
--md-ai-input-supporting-text-size | --md-sys-typescale-body-small-size |
--md-ai-input-supporting-text-weight | --md-sys-typescale-body-small-weight |
--md-ai-input-text-max-height | 108px |