{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\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",
    "<img alt=\"Chat Design Specification\" src=\"../../assets/ChatDesignSpecification.png\"></img>\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",
    "* **``disabled_enter``** (bool): If True, disables sending the message by pressing the `enter_sends` key.\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",
    "\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=5000): Max character length of the input field. Defaults to 5000\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",
    "\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": [
    "pn.chat.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 = pn.chat.ChatAreaInput(placeholder=\"Type something, and press Enter to submit!\")\n",
    "output_markdown = pn.bind(output, chat_area_input.param.value)\n",
    "pn.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 = pn.chat.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",
    "pn.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=}')"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}