RI-7690 Rework the visuals of the Redis Copilot screens

[valkirilov]

Description

Update the visual of the Redis Copilot:

• update the colors of the chat bubbles
• align the styles of the popovers with Figma
• changed sass styles with styled components

How it was tested

When not logged in

1. Open Redis Insight
2. Open Redis Copilot from the top right corner

Expect to see the login form and be able to sign in to your account.

Before	After

When you're not connected to a database

1. Open Redis Insight
2. Open Redis Copilot from the top right corner
3. Hover over the textarea for entering a new prompt

You should see an informative tooltip to let you know that you should open a database first.

Before	After

Welcome message by the bot

1. Open Redis Insight
2. Open Redis Copilot from the top right corner

If you're already logged in, you should be able to see the welcome message provided by the bot

Before	After

Consent popover for "General" chat

1. Open Redis Insight
2. Open Redis Copilot from the top right corner
3. Type in some prompt into the text area
4. Click on the button to submit your message

A confirmation popover should appear on the screen.

Before	After

Consent popover for "My Data" chat

1. Open Redis Insight
2. Open Redis Copilot from the top right corner
3. Click on the "My Data" tab at the top
4. Type in some prompt into the text area
5. Click on the button to submit your message

A confirmation popover should appear on the screen.

Before	After

Chat with the bot

1. Open Redis Insight
2. Open Redis Copilot from the top right corner
3. Click on the "My Data" tab at the top
4. Type in some prompt into the text area
5. Click on the button to submit your message

You should be able to see your own message and a response from the bot.

Before	After
With a scrollbar	-

Tips popover

1. Open Redis Insight
2. Open Redis Copilot from the top right corner
3. Click on the "My Data" tab at the top
4. Click on the light bulb icon in the top right corner

A popover should appear with a link to the tutorials section

Before	After

Restart Session

1. Open Redis Insight
2. Open Redis Copilot from the top right corner
3. Click on the eraser icon in the top right corner

A confirmation popover should appear with an option to clear the existing chat history.

Before	After

Failed messages

I'm not sure how to simulate real-world error, so I had to force it programmatically by changing the following line in src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx

Original

const { id, content, error, type: messageType } = message

Force error

const { id, content, type: messageType } = message
const error = "Ops! Something went wrong. Please try again."

Note: The error state uses a transparent chat bubble and icon indicator that something failed.

Before	After

[github-actions]

Code Coverage - Frontend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	82.23%	20154/24510
🟡	Branches	67.7%	8728/12892
🟡	Functions	76.36%	5361/7021
🟢	Lines	82.64%	19732/23878

Test suite run success

5229 tests passing in 681 suites.

Report generated by 🧪jest coverage report action from 6c22712