{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `ChatAreaInput` inherits from `TextAreaInput`, allowing entering any multiline string using a text input\n", "box, with the ability to click the \"Enter\" key or optionally the \"Ctrl-Enter\" key to submit the message.\n", "\n", "Whether \"Enter\" or \"Ctrl-Enter\" sends the message depends on whether the `enter_sends` parameter is set to True (the default) or False.\n", "\n", "Unlike TextAreaInput, the `ChatAreaInput` defaults to auto_grow=True and\n", "max_rows=10, and the `value` is not synced to the server until the message is actually sent, so watch `value_input` if you need to access what's currently\n", "available in the text input box.\n", "\n", "Lines are joined with the newline character `\\n`.\n", "\n", "The primary purpose of `ChatAreaInput` is its use with [`ChatInterface`](ChatInterface.ipynb) for a high-level, *easy to use*, *ChatGPT like* interface.\n", "\n", "\"Chat\n", "\n", "#### Parameters:\n", "\n", "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n", "\n", "##### Core\n", "\n", "* **`accept`** (str): A comma separated string of file extensions (with dots) or MIME types\n", " that should be accepted for upload. Examples: '.csv,.json,.txt' or\n", " 'text/csv,application/json'.\n", "* **`actions`** (dict): A dictionary of actions that can be invoked via the speed dial to the\n", " left of input area. The actions should be defined as a dictionary indexed\n", " by the name of the action mapping to values that themselves are dictionaries\n", " containing an icon. Users can define callbacks by registering callbacks using\n", " the on_action method.\n", "* **`disabled_enter`** (bool): If True, disables sending the message by pressing the `enter_sends` key.\n", "* **`enable_upload`** (bool): If True, enables uploading of files.\n", "* **`enter_sends`** (bool): If True, pressing the Enter key sends the message, if False it is sent by pressing the Ctrl-Enter. Defaults to True.\n", "* **`value`** (str): The value when the \"Enter\" or \"Ctrl-Enter\" key is pressed. Only to be used with `watch` or `bind` because the `value` resets to `\"\"` after the message is sent; use `value_input` instead to access what's currently available in the text input box.\n", "* **`value_input`** (str): The current value updated on every key press.\n", "* **`value_uploaded`** (dict): Dictionary containing raw file data keyed by filename after user sends uploads. Each entry contains mime_type, value (bytes), and size\n", "* **`enter_pressed`** (bool): Event when the Enter/Ctrl+Enter key has been pressed.\n", "* **`on_submit`** (callable): Callback to invoke when the send button or enter is pressed; should accept an event and instance as args. If unspecified, the default behavior is to send a Column containing the input text and views. This only affects the user-facing input, and does not affect the `send` method.\n", "\n", "##### Display\n", "\n", "* **`auto_grow`** (boolean, default=True): Whether the TextArea should automatically grow in height to fit the content.\n", "* **`cols`** (int, default=2): The number of columns in the text input field.\n", "* **`disabled`** (boolean, default=False): Whether the widget is editable\n", "* **`max_length`** (int, default=50000): Max character length of the input field. Defaults to 50000\n", "* **`max_rows`** (int, default=10): The maximum number of rows in the text input field when `auto_grow=True`.\n", "* **`name`** (str): The title of the widget\n", "* **`placeholder`** (str): A placeholder string displayed when no value is entered\n", "* **`rows`** (int, default=2): The number of rows in the text input field.\n", "* **`resizable`** (boolean | str, default='both'): Whether the layout is interactively resizable, and if so in which dimensions: `width`, `height`, or `both`.\n", "* **`views`** (list): A list of views of the uploaded files.\n", "___" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### Basics\n", "\n", "To submit a message, press the \"Enter\" key if **`enter_sends`** is True (the default), else press \"Ctrl-Enter\"." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.ChatAreaInput(placeholder=\"Type something, and press Enter to clear!\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `ChatAreaInput` is useful alongside `pn.bind` or `param.depends`." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "def output(value):\n", " return f\"Submitted: {value}\"\n", "\n", "chat_area_input = pmui.ChatAreaInput(placeholder=\"Type something, and press Enter to submit!\")\n", "output_markdown = pn.bind(output, chat_area_input.param.value)\n", "pmui.Row(chat_area_input, output_markdown)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To see what's currently typed in, use `value_input` instead because `value` will only be set during submission and be `\"\"` otherwise." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "chat_area_input = pmui.ChatAreaInput(enter_sends=False, # To submit a message, press Ctrl-Enter\n", " placeholder=\"Type something, do not submit it, and run the next cell\",)\n", "output_markdown = pn.bind(output, chat_area_input.param.value)\n", "\n", "pmui.Row(chat_area_input, output_markdown)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "print(f'{chat_area_input.value_input=}, {chat_area_input.value=}')" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.12.2" } }, "nbformat": 4, "nbformat_minor": 4 }