fix: chat UI send bad format message history after long response

[sytranvn]

Fix error when received long response, the next prompt will have bad format.

Tested with provider: ollama

Enhance send button

Disable send button when prompt is locking.

Prompt

Before

Body

{
  "prompt": "Update schema to allow linking a todo with other todos",
  "chatHistory": [
    {
      "prompt": "design a todos postgres database schema",
      "response": [
        "",
        "Here is a sample PostgreSQL schema for a To-Do List application:",
        "",
        "**Users Table**",
        "",
        "| Column Name | Data Type | Description |",
        "| --- | --- | --- |",
        "| id | integer (primary key) | Unique identifier for each user |",
        "| username | text | Username used to log in |",
        "| password | text | Hashed password |",
        "| email | text | Email address of the user |",
        "| created_at | timestamp with time zone | Date and time the user was created |",
        "",
        "**Tasks Table**",
        "",
        "| Column Name | Data Type | Description |",
        "| --- | --- | --- |",
        "| id | integer (primary key) | Unique identifier for each task |",
        "| title | text | Title of the task |",
        "| description | text | Detailed description of the task |",
        "| due_date | date | Date by which the task is due |",
        "| completed | boolean | Whether or not the task has been completed |",
        "| created_at | timestamp with time zone | Date and time the task was created |",
        "",
        "**User Tasks Table**",
        "",
        "| Column Name | Data Type | Description |",
        "| --- | --- | --- |",
        "| user_id | integer (foreign key) | Unique identifier of the user who owns the task |",
        "| task_id | integer (foreign key) | Unique identifier of the task |",
        "| completed | boolean | Whether or not the task has been completed by the user |",
        "| created_at | timestamp with time zone | Date and time the task was completed by the user |",
        "",
        "This schema includes three tables: `users`, `tasks`, and `user_tasks`. The `users` table stores information about each user, including their username, email address, and hashed password. The `tasks` table stores information about each task, including its title, description, due date, and whether or not it has been completed. Finally, the `user_tasks` table links each task to a specific user who owns it, as well as whether or not the task has been completed by that user.",
        "",
        "This schema should provide a good starting point for building a To-Do List application using PostgreSQL. Of course, you can always customize and expand on this structure based on your specific needs."
      ]
    }
  ]
}

Response

After

{
  "prompt": "Update schema to allow linking a todo with other todos",
  "chatHistory": [
    {
      "prompt": "design a todos postgres database schema ",
      "response": [
        "\nHere is a sample schema for a todos PostgreSQL database:\n\n```\nCREATE TABLE users (\n  id SERIAL PRIMARY KEY,\n  username VARCHAR(50) NOT NULL UNIQUE,\n  email VARCHAR(100) NOT NULL UNIQUE,\n  password VARCHAR(256) NOT NULL\n);\n\nCREATE TABLE todos (\n  id SERIAL PRIMARY KEY,\n  title VARCHAR(100) NOT NULL,\n  description TEXT NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,\n  user_id INTEGER REFERENCES users(id) ON DELETE RESTRICT\n);\n\nCREATE TABLE todo_items (\n  id SERIAL PRIMARY KEY,\n  title VARCHAR(100) NOT NULL,\n  description TEXT NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,\n  todo_id INTEGER REFERENCES todos(id) ON DELETE RESTRICT\n);\n```\n\nExplanation:\n\n* The `users` table stores information about users, including their username, email, and password.\n* The `todos` table stores information about todos, including the title, description, and user who created it.\n* The `todo_items` table stores information about todo items, including the title, description, and parent todo.\n\nNote: This is a simplified schema and may need to be expanded depending on your specific requirements. Additionally, you may want to consider adding additional columns for things like due dates, priority levels, or tags."
      ]
    }
  ]
}

Response with no error