7 |
17 | );
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/cypress/e2e/custom_element/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('Custom Element', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | function getCustomElement() {
9 | return cy.get('.step').eq(0).find('.inline-custom').first()
10 | }
11 |
12 | it('should be able to render an interactive custom element', () => {
13 | cy.get('.step').should('have.length', 1);
14 |
15 | cy.get('.step').eq(0).find('.inline-custom').should('have.length', 1);
16 |
17 | getCustomElement().should('contain', 'Count: 1');
18 |
19 | getCustomElement().find("#increment").click()
20 | getCustomElement().should('contain', 'Count: 2');
21 |
22 | getCustomElement().find("#increment").click()
23 | getCustomElement().should('contain', 'Count: 3');
24 |
25 | getCustomElement().find("#action").click()
26 |
27 | cy.get('.step').should('have.length', 2);
28 | cy.get('.step').eq(1).should('contain', 'Executed test action!');
29 |
30 | getCustomElement().find("#remove").click()
31 | cy.get('.step').eq(0).find('.inline-custom').should("not.exist")
32 |
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/cypress/e2e/custom_theme/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def main():
6 | await cl.Message(content="Hello!").send()
7 |
--------------------------------------------------------------------------------
/cypress/e2e/custom_theme/public/theme.json:
--------------------------------------------------------------------------------
1 | {
2 | "custom_fonts": ["https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto"],
3 | "variables": {
4 | "light": {
5 | "--font-sans": "'Poppins', sans-serif",
6 | "--background": "0 100% 50%"
7 | },
8 | "dark": {
9 | "--font-sans": "'Roboto', sans-serif",
10 | "--background": "100 100% 50%"
11 | }
12 | }
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/cypress/e2e/custom_theme/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from "../../support/testUtils";
2 |
3 | describe("Custom Theme", () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it("should have the roboto font family and green bg in dark theme", () => {
9 | // The hsl value is converted to rgb
10 | cy.get('body').should('have.css', 'background-color', 'rgb(85, 255, 0)')
11 | cy.get('body').should('have.css', 'font-family', "Roboto, sans-serif")
12 | });
13 |
14 | it("should have the poppins font family and red bg in light theme", () => {
15 | cy.visit('/');
16 | cy.get("#theme-toggle").click()
17 | cy.contains('Light').click();
18 | // The hsl value is converted to rgb
19 | cy.get('body').should('have.css', 'background-color', 'rgb(255, 0, 0)')
20 | cy.get('body').should('have.css', 'font-family', "Poppins, sans-serif")
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/cypress/e2e/dataframe/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('dataframe', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to display an inline dataframe', () => {
9 | // Check if the DataFrame is rendered within the first step
10 | cy.get('.step').should('have.length', 1);
11 | cy.get('.step').first().find('.dataframe').should('have.length', 1);
12 | })
13 | });
14 |
--------------------------------------------------------------------------------
/cypress/e2e/edit_message/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_message
5 | async def main():
6 | await cl.Message(
7 | content=f"Chat context length: {len(cl.chat_context.get())}"
8 | ).send()
9 |
--------------------------------------------------------------------------------
/cypress/e2e/edit_message/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer, submitMessage } from '../../support/testUtils';
2 |
3 | describe('Edit Message', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to edit a message', () => {
9 | submitMessage('Hello 1');
10 | submitMessage('Hello 2');
11 |
12 | cy.get('.step').should('have.length', 4);
13 | cy.get('.step').eq(3).should('contain', 'Chat context length: 3');
14 |
15 | cy.get('.step').eq(0).trigger('mouseover').find('.edit-message').click({ force: true });
16 | cy.get('#edit-chat-input').type('Hello 3');
17 | cy.get('.step').eq(0).find('.confirm-edit').click({ force: true });
18 |
19 | cy.get('.step').should('have.length', 2);
20 | cy.get('.step').eq(1).should('contain', 'Chat context length: 1');
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/cypress/e2e/elements/cat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/e2e/elements/cat.jpeg
--------------------------------------------------------------------------------
/cypress/e2e/elements/dummy.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/e2e/elements/dummy.pdf
--------------------------------------------------------------------------------
/cypress/e2e/error_handling/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | def main():
6 | raise Exception("This is an error message")
7 |
--------------------------------------------------------------------------------
/cypress/e2e/error_handling/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('Error Handling', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should correctly display errors', () => {
9 | cy.get('.step')
10 | .should('have.length', 1)
11 | .eq(0)
12 | .should('contain', 'This is an error message');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/cypress/e2e/file_element/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def start():
6 | elements = [
7 | cl.File(
8 | name="example.mp4",
9 | path="../../fixtures/example.mp4",
10 | display="inline",
11 | mime="video/mp4",
12 | ),
13 | cl.File(
14 | name="cat.jpeg",
15 | path="../../fixtures/cat.jpeg",
16 | display="inline",
17 | mime="image/jpg",
18 | ),
19 | cl.File(
20 | name="hello.py",
21 | path="../../fixtures/hello.py",
22 | display="inline",
23 | mime="plain/py",
24 | ),
25 | cl.File(
26 | name="example.mp3",
27 | path="../../fixtures/example.mp3",
28 | display="inline",
29 | mime="audio/mp3",
30 | ),
31 | ]
32 |
33 | await cl.Message(
34 | content="This message has a couple of file element", elements=elements
35 | ).send()
36 |
--------------------------------------------------------------------------------
/cypress/e2e/file_element/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('file', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to display a file element', () => {
9 | cy.get('.step').should('have.length', 1);
10 | cy.get('.step').eq(0).find('.inline-file').should('have.length', 4);
11 |
12 | cy.get('.inline-file').should(($files) => {
13 | const downloads = $files
14 | .map((i, el) => Cypress.$(el).attr('download'))
15 | .get();
16 |
17 | expect(downloads).to.have.members([
18 | 'example.mp4',
19 | 'cat.jpeg',
20 | 'hello.py',
21 | 'example.mp3'
22 | ]);
23 | });
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/cypress/e2e/header_auth/main.py:
--------------------------------------------------------------------------------
1 | from typing import Optional
2 |
3 | import chainlit as cl
4 |
5 |
6 | @cl.header_auth_callback
7 | async def header_auth_callback(headers) -> Optional[cl.User]:
8 | if headers.get("test-header"):
9 | return cl.User(identifier="admin")
10 | else:
11 | return None
12 |
13 |
14 | @cl.on_chat_start
15 | async def on_chat_start():
16 | user = cl.user_session.get("user")
17 | await cl.Message(f"Hello {user.identifier}").send()
18 |
--------------------------------------------------------------------------------
/cypress/e2e/llama_index_cb/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 | from llama_index.core.callbacks.schema import CBEventType, EventPayload
3 | from llama_index.core.llms import ChatMessage, ChatResponse
4 | from llama_index.core.schema import NodeWithScore, TextNode
5 |
6 |
7 | @cl.on_chat_start
8 | async def start():
9 | await cl.Message(content="LlamaIndexCb").send()
10 |
11 | cb = cl.LlamaIndexCallbackHandler()
12 |
13 | cb.on_event_start(CBEventType.RETRIEVE, payload={})
14 |
15 | await cl.sleep(0.2)
16 |
17 | cb.on_event_end(
18 | CBEventType.RETRIEVE,
19 | payload={
20 | EventPayload.NODES: [
21 | NodeWithScore(node=TextNode(text="This is text1"), score=1)
22 | ]
23 | },
24 | )
25 |
26 | cb.on_event_start(CBEventType.LLM)
27 |
28 | await cl.sleep(0.2)
29 |
30 | response = ChatResponse(message=ChatMessage(content="This is the LLM response"))
31 | cb.on_event_end(
32 | CBEventType.LLM,
33 | payload={
34 | EventPayload.RESPONSE: response,
35 | EventPayload.PROMPT: "This is the LLM prompt",
36 | },
37 | )
38 |
--------------------------------------------------------------------------------
/cypress/e2e/llama_index_cb/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('Llama Index Callback', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to send messages to the UI with prompts and elements', () => {
9 | cy.get('.step').should('have.length', 3);
10 |
11 | const toolCall = cy.get('#step-retrieve');
12 |
13 | toolCall.should('exist').click();
14 |
15 | const toolCallContent = toolCall.get('.message-content').eq(0);
16 |
17 | toolCallContent
18 | .should('exist')
19 | .get('.element-link')
20 | .eq(0)
21 | .should('contain', 'Source 0');
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/cypress/e2e/on_chat_start/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def start():
6 | await cl.Message(
7 | content="""Hello!
8 |
9 | ```python
10 | import chainlit as cl
11 |
12 | @cl.on_chat_start
13 | async def main():
14 | await cl.Message(
15 | content="Here is a simple message",
16 | ).send()
17 | ```"""
18 | ).send()
19 |
--------------------------------------------------------------------------------
/cypress/e2e/on_chat_start/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('on_chat_start', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should correctly run on_chat_start', () => {
9 | const messages = cy.get('.step');
10 | messages.should('have.length', 1);
11 |
12 | messages.eq(0).should('contain.text', 'Hello!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/cypress/e2e/password_auth/main.py:
--------------------------------------------------------------------------------
1 | from typing import Optional
2 |
3 | import chainlit as cl
4 |
5 |
6 | @cl.password_auth_callback
7 | def auth_callback(username: str, password: str) -> Optional[cl.User]:
8 | if (username, password) == ("admin", "admin"):
9 | return cl.User(identifier="admin")
10 | else:
11 | return None
12 |
13 |
14 | @cl.on_chat_start
15 | async def on_chat_start():
16 | user = cl.user_session.get("user")
17 | await cl.Message(f"Hello {user.identifier}").send()
18 |
--------------------------------------------------------------------------------
/cypress/e2e/plotly/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 | import plotly.graph_objects as go
3 |
4 |
5 | @cl.on_chat_start
6 | async def start():
7 | fig = go.Figure(
8 | data=[go.Bar(y=[2, 1, 3])],
9 | layout_title_text="A Figure Displayed with fig.show()",
10 | )
11 | elements = [cl.Plotly(name="chart", figure=fig, display="inline")]
12 |
13 | await cl.Message(content="This message has a chart", elements=elements).send()
14 |
--------------------------------------------------------------------------------
/cypress/e2e/plotly/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('plotly', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to display an inline chart', () => {
9 | cy.get('.step').should('have.length', 1);
10 | cy.get('.step').eq(0).find('.inline-plotly').should('have.length', 1);
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/cypress/e2e/pyplot/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 | import matplotlib.pyplot as plt
3 |
4 |
5 | @cl.on_chat_start
6 | async def start():
7 | fig, ax = plt.subplots()
8 | ax.plot([1, 2, 3, 4], [1, 4, 2, 3])
9 | elements = [cl.Pyplot(name="chart", figure=fig, display="inline")]
10 |
11 | await cl.Message(content="This message has a chart", elements=elements).send()
12 |
--------------------------------------------------------------------------------
/cypress/e2e/pyplot/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('pyplot', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to display an inline chart', () => {
9 | cy.get('.step').should('have.length', 1);
10 | cy.get('.step').eq(0).find('.inline-image').should('have.length', 1);
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/cypress/e2e/readme/chainlit_pt-BR.md:
--------------------------------------------------------------------------------
1 | # Bem-vindo ao Chainlit! 🚀🤖
2 |
3 | Olá, desenvolvedor! 👋 Estamos empolgados em tê-lo a bordo. O Chainlit é uma ferramenta poderosa projetada para ajudá-lo a prototipar, depurar e compartilhar aplicativos construídos em cima de LLMs.
4 |
5 | ## Links úteis 🔗
6 |
7 | - **Documentação:** Comece com a nossa abrangente Documentação do Chainlit 📚
8 | - **Comunidade no Discord:** Junte-se ao nosso amigável Discord do Chainlit para fazer perguntas, compartilhar seus projetos e se conectar com outros desenvolvedores! 💬
9 |
10 | Mal podemos esperar para ver o que você cria com o Chainlit! Boa codificação! 💻😊
11 |
12 | ## Tela de boas-vindas
13 |
14 | Para modificar a tela de boas-vindas, edite o arquivo chainlit.md
15 | na raiz do seu projeto. Se você não quiser uma tela de boas-vindas, basta deixar este arquivo vazio.
--------------------------------------------------------------------------------
/cypress/e2e/readme/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl # noqa: F401
2 |
3 |
4 | @cl.on_message
5 | async def on_message(msg):
6 | pass
7 |
--------------------------------------------------------------------------------
/cypress/e2e/readme/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | function openReadme() {
4 | cy.get('#readme-button').click();
5 | }
6 |
7 | describe('readme_language', () => {
8 | before(() => {
9 | runTestServer();
10 | });
11 |
12 | it('should show default markdown on open', () => {
13 | openReadme();
14 | cy.contains('Welcome to Chainlit!');
15 | });
16 |
17 | it('should show Portguese markdown on pt-BR language', () => {
18 | cy.visit('/', {
19 | onBeforeLoad(win) {
20 | Object.defineProperty(win.navigator, 'language', {
21 | value: 'pt-BR'
22 | });
23 | }
24 | });
25 | openReadme();
26 | cy.contains('Bem-vindo ao Chainlit!');
27 | });
28 |
29 | it('should fallback to default markdown on Klingon language', () => {
30 | cy.visit('/', {
31 | onBeforeLoad(win) {
32 | Object.defineProperty(win.navigator, 'language', {
33 | value: 'tlh'
34 | });
35 | }
36 | });
37 | openReadme();
38 | cy.contains('Welcome to Chainlit!');
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/cypress/e2e/remove_elements/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def start():
6 | step_image = cl.Image(
7 | name="image1", display="inline", path="../../fixtures/cat.jpeg"
8 | )
9 | msg_image = cl.Image(
10 | name="image1", display="inline", path="../../fixtures/cat.jpeg"
11 | )
12 |
13 | async with cl.Step(type="tool", name="tool1") as step:
14 | step.elements = [
15 | step_image,
16 | cl.Image(name="image2", display="inline", path="../../fixtures/cat.jpeg"),
17 | ]
18 | step.output = "This step has an image"
19 |
20 | await cl.Message(
21 | content="This message has an image",
22 | elements=[
23 | msg_image,
24 | cl.Image(name="image2", display="inline", path="../../fixtures/cat.jpeg"),
25 | ],
26 | ).send()
27 | await msg_image.remove()
28 | await step_image.remove()
29 |
--------------------------------------------------------------------------------
/cypress/e2e/remove_elements/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('remove_elements', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to remove elements', () => {
9 | cy.get('#step-tool1').should('exist');
10 | cy.get('#step-tool1').click();
11 | cy.get('#step-tool1')
12 | .parent()
13 | .parent()
14 | .find('.inline-image')
15 | .should('have.length', 1);
16 |
17 | cy.get('.step').should('have.length', 2);
18 | cy.get('.step').eq(1).find('.inline-image').should('have.length', 1);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/cypress/e2e/remove_step/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def main():
6 | msg1 = cl.Message(content="Message 1")
7 | await msg1.send()
8 |
9 | await cl.sleep(1)
10 |
11 | async with cl.Step(type="tool", name="tool1") as child1:
12 | child1.output = "Child 1"
13 |
14 | await cl.sleep(1)
15 | await child1.remove()
16 |
17 | msg2 = cl.Message(content="Message 2")
18 | await msg2.send()
19 |
20 | await cl.sleep(1)
21 | await msg1.remove()
22 |
23 | await cl.sleep(1)
24 | await msg2.remove()
25 |
26 | await cl.sleep(1)
27 |
28 | ask_msg = cl.AskUserMessage("Message 3")
29 | await ask_msg.send()
30 |
31 | await cl.sleep(1)
32 | await ask_msg.remove()
33 |
--------------------------------------------------------------------------------
/cypress/e2e/remove_step/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer, submitMessage } from '../../support/testUtils';
2 |
3 | describe('Remove Step', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to remove a step', () => {
9 | cy.get('.step').should('have.length', 1);
10 | cy.get('.step').eq(0).should('contain', 'Message 1');
11 |
12 | cy.get('#step-tool1').should('exist');
13 | cy.get('#step-tool1').click();
14 | cy.get('.message-content').eq(1).should('contain', 'Child 1');
15 |
16 | cy.get('#step-tool1').should('not.exist');
17 |
18 | cy.get('.step').eq(1).should('contain', 'Message 2');
19 | cy.get('.step').should('have.length', 1);
20 | cy.get('.step').eq(0).should('contain', 'Message 2');
21 | cy.get('.step').should('have.length', 0);
22 |
23 | cy.get('.step').should('have.length', 1);
24 | cy.get('.step').eq(0).should('contain', 'Message 3');
25 |
26 | submitMessage('foo');
27 |
28 | cy.get('.step').should('have.length', 1);
29 | cy.get('.step').eq(0).should('contain', 'foo');
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/cypress/e2e/sidebar/cat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/e2e/sidebar/cat.jpeg
--------------------------------------------------------------------------------
/cypress/e2e/sidebar/dummy.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/e2e/sidebar/dummy.pdf
--------------------------------------------------------------------------------
/cypress/e2e/sidebar/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def start():
6 | await cl.Message(content="Hello").send()
7 |
8 | elements = [
9 | cl.Image(path="./cat.jpeg", name="image1"),
10 | cl.Pdf(path="./dummy.pdf", name="pdf1"),
11 | cl.Text(content="Here is a side text document", name="text1"),
12 | cl.Text(content="Here is a page text document", name="text2"),
13 | ]
14 |
15 | await cl.ElementSidebar.set_elements(elements)
16 | await cl.ElementSidebar.set_title("Test title")
17 |
18 |
19 | @cl.on_message
20 | async def message(msg: cl.Message):
21 | await cl.ElementSidebar.set_elements([cl.Text(content="Text changed!")])
22 | await cl.ElementSidebar.set_title("Title changed!")
23 |
24 | await cl.sleep(2)
25 |
26 | await cl.ElementSidebar.set_elements([])
27 |
--------------------------------------------------------------------------------
/cypress/e2e/sidebar/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer, submitMessage } from '../../support/testUtils';
2 |
3 | describe('Elements', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to open the sidebar from python', () => {
9 | cy.get('#side-view-content').find('.inline-image').should('have.length', 1);
10 | cy.get('#side-view-content').find('.inline-pdf').should('have.length', 1);
11 | cy.get('#side-view-content').find('.inline-text').should('have.length', 2);
12 |
13 | cy.get('#side-view-title').should("have.text", "Test title")
14 |
15 | submitMessage('Hello');
16 |
17 | cy.get('#side-view-content').find('.inline-text').should('have.length', 1).should("have.text", "Text changed!");
18 | cy.get('#side-view-content').find('.inline-image').should('have.length', 0);
19 | cy.get('#side-view-content').find('.inline-pdf').should('have.length', 0);
20 |
21 | cy.get('#side-view-title').should("have.text", "Title changed!")
22 |
23 | cy.get('#side-view-content').should("not.exist")
24 |
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/cypress/e2e/starters/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.set_starters
5 | async def starters():
6 | return [
7 | cl.Starter(label="test1", message="Running starter 1"),
8 | cl.Starter(label="test2", message="Running starter 2"),
9 | cl.Starter(label="test3", message="Running starter 3"),
10 | ]
11 |
12 |
13 | @cl.on_message
14 | async def on_message(msg: cl.Message):
15 | await cl.Message(msg.content).send()
16 |
--------------------------------------------------------------------------------
/cypress/e2e/starters/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('Starters', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to use a starter', () => {
9 | cy.wait(1000);
10 | cy.get('#starter-test1').should('exist').click();
11 | cy.get('.step').should('have.length', 2);
12 |
13 | cy.get('.step').eq(0).contains('Running starter 1');
14 | cy.get('.step').eq(1).contains('Running starter 1');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/cypress/e2e/step/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | def tool_3():
5 | with cl.Step(name="tool3", type="tool") as s:
6 | cl.run_sync(cl.sleep(2))
7 | s.output = "Response from tool 3"
8 |
9 |
10 | @cl.step(name="tool2", type="tool")
11 | def tool_2():
12 | tool_3()
13 | cl.run_sync(cl.Message(content="Message from tool 2").send())
14 | return "Response from tool 2"
15 |
16 |
17 | @cl.step(name="tool1", type="tool")
18 | def tool_1():
19 | tool_2()
20 | return "Response from tool 1"
21 |
22 |
23 | @cl.on_message
24 | async def main(message: cl.Message):
25 | tool_1()
26 |
--------------------------------------------------------------------------------
/cypress/e2e/step/main_async.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | async def tool_3():
5 | async with cl.Step(name="tool3", type="tool") as s:
6 | await cl.sleep(2)
7 | s.output = "Response from tool 3"
8 |
9 |
10 | @cl.step(name="tool2", type="tool")
11 | async def tool_2():
12 | await tool_3()
13 | await cl.Message(content="Message from tool 2").send()
14 | return "Response from tool 2"
15 |
16 |
17 | @cl.step(name="tool1", type="tool")
18 | async def tool_1():
19 | await tool_2()
20 | return "Response from tool 1"
21 |
22 |
23 | @cl.on_message
24 | async def main(message: cl.Message):
25 | await tool_1()
26 |
--------------------------------------------------------------------------------
/cypress/e2e/step/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import {
2 | describeSyncAsync,
3 | runTestServer,
4 | submitMessage
5 | } from '../../support/testUtils';
6 |
7 | describeSyncAsync('Step', () => {
8 | before(() => {
9 | runTestServer();
10 | });
11 |
12 | it('should be able to nest steps', () => {
13 | submitMessage('Hello');
14 |
15 | cy.get('#step-tool1').should('exist').click();
16 |
17 | cy.get('#step-tool2').should('exist').click();
18 |
19 | cy.get('#step-tool3').should('exist');
20 |
21 | cy.get('.step').should('have.length', 5);
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/cypress/e2e/stop_task/main_async.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_message
5 | async def message(message: cl.Message):
6 | await cl.Message(content="Message 1").send()
7 | await cl.sleep(1)
8 | await cl.Message(content="Message 2").send()
9 |
--------------------------------------------------------------------------------
/cypress/e2e/stop_task/main_sync.py:
--------------------------------------------------------------------------------
1 | import time
2 |
3 | import chainlit as cl
4 |
5 |
6 | def sync_function():
7 | time.sleep(1)
8 |
9 |
10 | @cl.on_message
11 | async def message(message: cl.Message):
12 | await cl.Message(content="Message 1").send()
13 | await cl.make_async(sync_function)()
14 | await cl.Message(content="Message 2").send()
15 |
--------------------------------------------------------------------------------
/cypress/e2e/stop_task/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import {
2 | describeSyncAsync,
3 | runTestServer,
4 | submitMessage
5 | } from '../../support/testUtils';
6 |
7 | describeSyncAsync('Stop task', (mode) => {
8 | before(() => {
9 | runTestServer(mode);
10 | });
11 |
12 | it('should be able to stop a task', () => {
13 | submitMessage('Hello');
14 | cy.get('#stop-button').should('exist').click();
15 | cy.get('#stop-button').should('not.exist');
16 |
17 | cy.get('.step').should('have.length', 3);
18 | cy.get('.step').last().should('contain.text', 'Task manually stopped.');
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/cypress/e2e/streaming/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 | token_list = ["the ", "quick ", "brown ", "fox"]
4 |
5 | sequence_list = ["the", "the quick", "the quick brown", "the quick brown fox"]
6 |
7 |
8 | @cl.on_chat_start
9 | async def main():
10 | msg = cl.Message(content="")
11 | for token in token_list:
12 | await msg.stream_token(token)
13 | await cl.sleep(0.2)
14 |
15 | await msg.send()
16 |
17 | msg = cl.Message(content="")
18 | for seq in sequence_list:
19 | await msg.stream_token(token=seq, is_sequence=True)
20 | await cl.sleep(0.2)
21 |
22 | await msg.send()
23 |
24 | step = cl.Step(type="tool", name="tool1")
25 | for token in token_list:
26 | await step.stream_token(token)
27 | await cl.sleep(0.2)
28 |
29 | await step.send()
30 |
--------------------------------------------------------------------------------
/cypress/e2e/streaming/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | const tokenList = ['the', 'quick', 'brown', 'fox'];
4 |
5 | function messageStream(index: number) {
6 | for (const token of tokenList) {
7 | cy.get('.step').eq(index).should('contain', token);
8 | }
9 | cy.get('.step').eq(index).should('contain', tokenList.join(' '));
10 | }
11 |
12 | function toolStream(tool: string) {
13 | const toolCall = cy.get(`#step-${tool}`);
14 | toolCall.click();
15 | for (const token of tokenList) {
16 | toolCall.parent().parent().should('contain', token);
17 | }
18 | toolCall.parent().parent().should('contain', tokenList.join(' '));
19 | }
20 |
21 | describe('Streaming', () => {
22 | before(() => {
23 | runTestServer();
24 | });
25 |
26 | it('should be able to stream a message', () => {
27 | cy.get('.step').should('have.length', 1);
28 |
29 | messageStream(0);
30 |
31 | cy.get('.step').should('have.length', 1);
32 |
33 | messageStream(1);
34 |
35 | cy.get('.step').should('have.length', 2);
36 |
37 | toolStream('tool1');
38 |
39 | cy.get('.step').should('have.length', 3);
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/cypress/e2e/tasklist/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer, submitMessage } from '../../support/testUtils';
2 |
3 | describe('tasklist', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should display the tasklist ', () => {
9 | cy.get('.step').should('have.length', 0);
10 | cy.get('.tasklist').should('have.length', 1);
11 | cy.get('.tasklist.tasklist-mobile').should('not.exist');
12 |
13 | cy.get('.tasklist').should('be.visible');
14 | cy.get('.tasklist .task').should('have.length', 17);
15 |
16 | cy.get('.tasklist .task.task-status-ready').should(
17 | 'have.length',
18 | 7
19 | );
20 | cy.get('.tasklist .task.task-status-running').should(
21 | 'have.length',
22 | 0
23 | );
24 | cy.get('.tasklist .task.task-status-failed').should(
25 | 'have.length',
26 | 1
27 | );
28 | cy.get('.tasklist .task.task-status-done').should(
29 | 'have.length',
30 | 9
31 | );
32 |
33 | submitMessage('ok');
34 |
35 | cy.get('.tasklist').should('not.exist');
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/cypress/e2e/update_step/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_chat_start
5 | async def main():
6 | msg = cl.Message(content="Hello!")
7 | await msg.send()
8 |
9 | async with cl.Step(type="tool", name="tool1") as step:
10 | step.output = "Foo"
11 |
12 | await cl.sleep(1)
13 | msg.content = "Hello again!"
14 | await msg.update()
15 |
16 | step.output += " Bar"
17 | await step.update()
18 |
--------------------------------------------------------------------------------
/cypress/e2e/update_step/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | describe('Update Step', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to update a step', () => {
9 | cy.get(`#step-tool1`).click();
10 | cy.get('.step').should('have.length', 2);
11 | cy.get('.step').eq(0).should('contain', 'Hello!');
12 | cy.get(`#step-tool1`).parent().parent().should('contain', 'Foo');
13 |
14 | cy.get('.step').eq(0).should('contain', 'Hello again!');
15 | cy.get(`#step-tool1`).parent().parent().should('contain', 'Foo Bar');
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/cypress/e2e/upload_attachments/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_message
5 | async def main(message: cl.Message):
6 | await cl.Message(content=f"Content: {message.content}").send()
7 | # Check if message.elements is not empty and is a list
8 | for index, item in enumerate(message.elements):
9 | # Send a response for each element
10 | await cl.Message(content=f"Received element {index}: {item.name}").send()
11 |
--------------------------------------------------------------------------------
/cypress/e2e/user_env/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_message
5 | async def main():
6 | key = "TEST_KEY"
7 | user_env = cl.user_session.get("env")
8 | provided_key = user_env.get(key)
9 | await cl.Message(content=f"Key {key} has value {provided_key}").send()
10 |
--------------------------------------------------------------------------------
/cypress/e2e/user_env/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer, submitMessage } from '../../support/testUtils';
2 |
3 | describe('User Env', () => {
4 | before(() => {
5 | runTestServer();
6 | });
7 |
8 | it('should be able to ask a user for required keys', () => {
9 | const key = 'TEST_KEY';
10 | const keyValue = 'TEST_VALUE';
11 |
12 | cy.get(`#${key}`).should('exist').type(keyValue);
13 |
14 | cy.get('#submit-env').should('exist').click();
15 |
16 | submitMessage('Hello');
17 |
18 | cy.get('.step').should('have.length', 2);
19 | cy.get('.step').eq(1).should('contain', keyValue);
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/cypress/e2e/user_session/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_message
5 | async def main(message: cl.Message):
6 | prev_msg = cl.user_session.get("prev_msg")
7 | await cl.Message(content=f"Prev message: {prev_msg}").send()
8 | cl.user_session.set("prev_msg", message.content)
9 |
--------------------------------------------------------------------------------
/cypress/e2e/user_session/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer, submitMessage } from '../../support/testUtils';
2 |
3 | function newSession() {
4 | cy.get('#header')
5 | .get('#new-chat-button')
6 | .should('exist')
7 | .click({ force: true });
8 | cy.get('#new-chat-dialog').should('exist');
9 | cy.get('#confirm').should('exist').click();
10 |
11 | cy.get('#new-chat-dialog').should('not.exist');
12 | }
13 |
14 | describe('User Session', () => {
15 | before(() => {
16 | runTestServer();
17 | });
18 |
19 | it('should be able to store data related per user session', () => {
20 | submitMessage('Hello 1');
21 |
22 | cy.get('.step').should('have.length', 2);
23 | cy.get('.step').eq(1).should('contain', 'Prev message: None');
24 |
25 | submitMessage('Hello 2');
26 |
27 | cy.get('.step').should('have.length', 4);
28 | cy.get('.step').eq(3).should('contain', 'Prev message: Hello 1');
29 |
30 | newSession();
31 |
32 | submitMessage('Hello 3');
33 |
34 | cy.get('.step').should('have.length', 2);
35 | cy.get('.step').eq(1).should('contain', 'Prev message: None');
36 |
37 | submitMessage('Hello 4');
38 |
39 | cy.get('.step').should('have.length', 4);
40 | cy.get('.step').eq(3).should('contain', 'Prev message: Hello 3');
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/cypress/e2e/window_message/main.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.on_window_message
5 | async def window_message(message: str):
6 | if message.startswith("Client: "):
7 | await cl.send_window_message("Server: World")
8 |
9 |
10 | @cl.on_message
11 | async def message(message: str):
12 | await cl.Message(content="ok").send()
13 |
--------------------------------------------------------------------------------
/cypress/e2e/window_message/public/iframe.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Count: {props.count}
8 | {props.loading ? "Loading..." : null}
9 |
10 |
15 |
16 | Chainlit iframe
8 | 9 |No message received
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/cypress/e2e/window_message/spec.cy.ts:
--------------------------------------------------------------------------------
1 | import { runTestServer } from '../../support/testUtils';
2 |
3 | const getIframeWindow = () => {
4 | return cy
5 | .get('iframe[data-cy="the-frame"]')
6 | .its('0.contentWindow')
7 | .should('exist');
8 | };
9 |
10 | describe('Window Message', () => {
11 | before(() => {
12 | runTestServer();
13 | });
14 |
15 | it('should be able to send and receive window messages', () => {
16 | cy.visit('/public/iframe.html');
17 |
18 | cy.get('div#message').should('contain', 'No message received');
19 |
20 | getIframeWindow().then((win) => {
21 | cy.wait(1000).then(() => {
22 | win.postMessage('Client: Hello', '*');
23 | });
24 | });
25 |
26 | cy.get('div#message').should('contain', 'Server: World');
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/cypress/fixtures/cat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/fixtures/cat.jpeg
--------------------------------------------------------------------------------
/cypress/fixtures/example.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/fixtures/example.mp3
--------------------------------------------------------------------------------
/cypress/fixtures/example.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chainlit/chainlit/203b6821ef2e9697f1da8cb8ebda7ba5a9dd5be8/cypress/fixtures/example.mp4
--------------------------------------------------------------------------------
/cypress/fixtures/hello.cpp:
--------------------------------------------------------------------------------
1 | // Your First C++ Program
2 |
3 | #include
28 |
47 | );
48 | };
49 |
50 | export { InputLabel };
51 |
--------------------------------------------------------------------------------
/frontend/src/components/ChatSettings/SwitchInput.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils';
2 | import * as React from 'react';
3 |
4 | import { Switch } from '@/components/ui/switch';
5 |
6 | import { InputStateHandler } from './InputStateHandler';
7 |
8 | interface InputStateProps {
9 | description?: string;
10 | hasError?: boolean;
11 | id: string;
12 | label?: string;
13 | tooltip?: string;
14 | children: React.ReactNode;
15 | }
16 |
17 | interface SwitchInputProps extends InputStateProps {
18 | checked: boolean;
19 | disabled?: boolean;
20 | onChange: (checked: boolean) => void;
21 | setField?: (field: string, value: boolean, shouldValidate?: boolean) => void;
22 | }
23 |
24 | const SwitchInput = ({
25 | checked,
26 | description,
27 | disabled,
28 | hasError,
29 | id,
30 | label,
31 | setField,
32 | tooltip
33 | }: SwitchInputProps): JSX.Element => {
34 | return (
35 |
29 |
32 | {tooltip && (
33 |
34 |
35 |
36 |
38 |
39 |
41 |
42 |
43 | )}
44 |
45 | {notificationsProps && {tooltip}
40 |
26 |
39 | );
40 | };
41 |
42 | export { ElementView };
43 |
--------------------------------------------------------------------------------
/frontend/src/components/Elements/Audio.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils';
2 |
3 | import { IAudioElement } from '@chainlit/react-client';
4 |
5 | const AudioElement = ({ element }: { element: IAudioElement }) => {
6 | if (!element.url) {
7 | return null;
8 | }
9 |
10 | return (
11 |
27 | {onGoBack ? (
28 |
31 | ) : null}
32 |
36 |
37 |
33 | {element.name}
34 |
35 |
12 |
15 | );
16 | };
17 |
18 | export { AudioElement };
19 |
--------------------------------------------------------------------------------
/frontend/src/components/Elements/ElementRef.tsx:
--------------------------------------------------------------------------------
1 | import { MessageContext } from '@/contexts/MessageContext';
2 | import { useContext } from 'react';
3 |
4 | import type { IMessageElement } from '@chainlit/react-client';
5 |
6 | interface ElementRefProps {
7 | element: IMessageElement;
8 | }
9 |
10 | const ElementRef = ({ element }: ElementRefProps) => {
11 | const { onElementRefClick } = useContext(MessageContext);
12 |
13 | // For inline elements, return a styled span
14 | if (element.display === 'inline') {
15 | return {element.name};
16 | }
17 |
18 | // For other elements, return a clickable link
19 | return (
20 | onElementRefClick?.(element)}
24 | >
25 | {element.name}
26 |
27 | );
28 | };
29 |
30 | export { ElementRef };
31 |
--------------------------------------------------------------------------------
/frontend/src/components/Elements/File.tsx:
--------------------------------------------------------------------------------
1 | import { type IFileElement } from '@chainlit/react-client';
2 |
3 | import { Attachment } from '@/components/chat/MessageComposer/Attachment';
4 |
5 | const FileElement = ({ element }: { element: IFileElement }) => {
6 | if (!element.url) {
7 | return null;
8 | }
9 |
10 | return (
11 |
17 | {element.name}
13 | 14 |Loading...
;
21 | } else if (error) {
22 | return An error occurred
;
23 | }
24 |
25 | let state;
26 |
27 | if (data) {
28 | state = data;
29 | } else {
30 | return null;
31 | }
32 |
33 | return (
34 |
37 | {msg}
38 |
39 | );
40 | }
41 |
42 | return this.props.children;
43 | }
44 | }
45 |
46 | export { ErrorBoundary };
47 |
--------------------------------------------------------------------------------
/frontend/src/components/Icon.tsx:
--------------------------------------------------------------------------------
1 | import * as LucideIcons from 'lucide-react';
2 |
3 | interface Props {
4 | name: string;
5 | className?: string;
6 | size?: number;
7 | color?: string;
8 | }
9 |
10 | const Icon = ({ name, ...props }: Props) => {
11 | // Convert the name to proper case (e.g., "plus" -> "Plus", "chevron-right" -> "ChevronRight")
12 | const formatIconName = (str: string): string => {
13 | return str
14 | .split('-')
15 | .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
16 | .join('');
17 | };
18 |
19 | // Try to get the icon component using the formatted name
20 | const formattedName = formatIconName(name);
21 | const IconComponent = LucideIcons[
22 | formattedName as keyof typeof LucideIcons
23 | ] as any;
24 |
25 | if (!IconComponent) {
26 | console.warn(`Icon "${name}" not found in Lucide icons`);
27 | return null;
28 | }
29 |
30 | return
18 |
24 |
20 |
23 |
29 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/frontend/src/components/Tasklist/TaskStatusIcon.tsx:
--------------------------------------------------------------------------------
1 | import { Check, Dot, X } from 'lucide-react';
2 |
3 | import { Loader } from '@/components/Loader';
4 |
5 | import type { ITask } from './Task';
6 |
7 | export const TaskStatusIcon = ({ status }: { status: ITask['status'] }) => {
8 | if (status === 'running') {
9 | return
34 | {index}
35 |
38 |
26 |
28 |
24 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/MessageComposer/Mcp/AnimatedPlugIcon.tsx:
--------------------------------------------------------------------------------
1 | import { Plug } from 'lucide-react';
2 | import { useEffect, useRef } from 'react';
3 |
4 | interface AnimatedPlugIconProps {
5 | duration?: number;
6 | strokeWidth?: number;
7 | className?: string;
8 | }
9 |
10 | const AnimatedPlugIcon: React.FC
43 |
45 | );
46 | };
47 |
48 | export default AnimatedPlugIcon;
49 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Buttons/Actions/index.tsx:
--------------------------------------------------------------------------------
1 | import { IAction } from '@chainlit/react-client';
2 |
3 | import { ActionButton } from './ActionButton';
4 |
5 | interface Props {
6 | actions: IAction[];
7 | }
8 |
9 | export default function MessageActions({ actions }: Props) {
10 | return (
11 | <>
12 | {actions.map((a) => (
13 | Debug in Literal AI
40 |
11 | {items.map((customElement) => {
12 | return
15 | );
16 |
17 | export { InlinedCustomElementList };
18 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedAudioList.tsx:
--------------------------------------------------------------------------------
1 | import type { IAudioElement } from '@chainlit/react-client';
2 |
3 | import { AudioElement } from '@/components/Elements/Audio';
4 |
5 | interface InlinedAudioListProps {
6 | items: IAudioElement[];
7 | }
8 |
9 | const InlinedAudioList = ({ items }: InlinedAudioListProps) => {
10 | return (
11 |
12 | {items.map((audio, i) => (
13 |
18 | );
19 | };
20 |
21 | export { InlinedAudioList };
22 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedDataframeList.tsx:
--------------------------------------------------------------------------------
1 | import type { IDataframeElement } from '@chainlit/react-client';
2 |
3 | import { LazyDataframe } from '@/components/Elements/LazyDataframe';
4 |
5 | interface Props {
6 | items: IDataframeElement[];
7 | }
8 |
9 | const InlinedDataframeList = ({ items }: Props) => (
10 |
14 |
16 | ))}
17 |
11 | {items.map((element, i) => {
12 | return (
13 |
19 | );
20 |
21 | export { InlinedDataframeList };
22 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedFileList.tsx:
--------------------------------------------------------------------------------
1 | import type { IFileElement } from '@chainlit/react-client';
2 |
3 | import { FileElement } from '@/components/Elements/File';
4 |
5 | interface Props {
6 | items: IFileElement[];
7 | }
8 |
9 | const InlinedFileList = ({ items }: Props) => {
10 | return (
11 |
14 |
16 | );
17 | })}
18 |
12 | {items.map((file, i) => {
13 | return (
14 |
20 | );
21 | };
22 |
23 | export { InlinedFileList };
24 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedImageList.tsx:
--------------------------------------------------------------------------------
1 | import { ImageElement } from '@/components/Elements/Image';
2 | import { QuiltedGrid } from '@/components/QuiltedGrid';
3 |
4 | import type { IImageElement } from 'client-types/';
5 |
6 | interface Props {
7 | items: IImageElement[];
8 | }
9 |
10 | const InlinedImageList = ({ items }: Props) => (
11 |
15 |
17 | );
18 | })}
19 |
11 | {items.map((pdf, i) => {
12 | return (
13 |
19 | );
20 |
21 | export { InlinedPDFList };
22 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedPlotlyList.tsx:
--------------------------------------------------------------------------------
1 | import type { IPlotlyElement } from '@chainlit/react-client';
2 |
3 | import { PlotlyElement } from '@/components/Elements/Plotly';
4 |
5 | interface Props {
6 | items: IPlotlyElement[];
7 | }
8 |
9 | const InlinedPlotlyList = ({ items }: Props) => (
10 |
14 |
16 | );
17 | })}
18 |
11 | {items.map((element, i) => {
12 | return (
13 |
26 | );
27 |
28 | export { InlinedPlotlyList };
29 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedTextList.tsx:
--------------------------------------------------------------------------------
1 | import type { ITextElement } from '@chainlit/react-client';
2 |
3 | import { TextElement } from '@/components/Elements/Text';
4 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
5 |
6 | interface Props {
7 | items: ITextElement[];
8 | }
9 |
10 | const InlinedTextList = ({ items }: Props) => (
11 |
21 |
23 | );
24 | })}
25 |
12 | {items.map((el) => {
13 | return (
14 |
15 |
16 | {el.name}
17 |
18 |
19 |
21 |
22 | );
23 | })}
24 |
25 | );
26 |
27 | export { InlinedTextList };
28 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedVideoList.tsx:
--------------------------------------------------------------------------------
1 | import { VideoElement } from '@/components/Elements/Video';
2 |
3 | import type { IVideoElement } from 'client-types/';
4 |
5 | interface Props {
6 | items: IVideoElement[];
7 | }
8 |
9 | const InlinedVideoList = ({ items }: Props) => (
10 |
11 | {items.map((i) => (
12 |
15 | );
16 |
17 | export { InlinedVideoList };
18 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/ScrollDownButton.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowDown } from 'lucide-react';
2 |
3 | import { Button } from '@/components/ui/button';
4 |
5 | interface Props {
6 | onClick?: () => void;
7 | }
8 |
9 | export default function ScrollDownButton({ onClick }: Props) {
10 | return (
11 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/Starters.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils';
2 | import { useMemo } from 'react';
3 |
4 | import { useChatSession, useConfig } from '@chainlit/react-client';
5 |
6 | import Starter from './Starter';
7 |
8 | interface Props {
9 | className?: string;
10 | }
11 |
12 | export default function Starters({ className }: Props) {
13 | const { chatProfile } = useChatSession();
14 | const { config } = useConfig();
15 |
16 | const starters = useMemo(() => {
17 | if (chatProfile) {
18 | const selectedChatProfile = config?.chatProfiles.find(
19 | (profile) => profile.name === chatProfile
20 | );
21 | if (selectedChatProfile?.starters) {
22 | return selectedChatProfile.starters.slice(0, 4);
23 | }
24 | }
25 | return config?.starters;
26 | }, [config, chatProfile]);
27 |
28 | if (!starters?.length) return null;
29 |
30 | return (
31 |
35 | {starters?.map((starter, i) => (
36 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/src/components/header/ApiKeys.tsx:
--------------------------------------------------------------------------------
1 | import { KeyRound } from 'lucide-react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import { useConfig } from '@chainlit/react-client';
5 |
6 | import { Button } from '@/components/ui/button';
7 | import {
8 | Tooltip,
9 | TooltipContent,
10 | TooltipProvider,
11 | TooltipTrigger
12 | } from '@/components/ui/tooltip';
13 | import { Translator } from 'components/i18n';
14 |
15 | export default function ApiKeys() {
16 | const { config } = useConfig();
17 | const requiredKeys = !!config?.userEnv?.length;
18 |
19 | if (!requiredKeys) return null;
20 |
21 | return (
22 |
38 |
34 | {open ? (
35 |
24 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/libs/copilot/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/libs/copilot/src/types.ts:
--------------------------------------------------------------------------------
1 | export interface IWidgetConfig {
2 | chainlitServer: string;
3 | showCot?: boolean;
4 | accessToken?: string;
5 | theme?: 'light' | 'dark';
6 | button?: {
7 | containerId?: string;
8 | imageUrl?: string;
9 | className?: string;
10 | };
11 | customCssUrl?: string;
12 | additionalQueryParamsForAPI?: Record