### Verify Chainlit Installation

Source: https://docs.chainlit.io/llms-full.txt

Run the hello command to verify the installation and launch the Chainlit UI.

```bash
chainlit hello
```

--------------------------------

### Install Dependencies

Source: https://docs.chainlit.io/llms-full.txt

Install the necessary libraries for LangChain, ChromaDB, and OpenAI integration.

```bash
pip install langchain langchain-community chromadb tiktoken openai langchain-openai
```

--------------------------------

### Defining and Setting Commands

Source: https://docs.chainlit.io/concepts/command

Example of defining a command list and setting them using the Chainlit emitter during the chat start event.

```python
[
  {
    "id": "canvas",
    "icon": "pen-line",
    "description": "Collaborate on writing and code"
  }
]

@cl.on_chat_start
async def start():
    await cl.context.emitter.set_commands(commands)

@cl.on_message
async def message(msg: cl.Message):
    if
```

--------------------------------

### Install dependencies

Source: https://docs.chainlit.io/llms-full.txt

Install the required packages for the Text to SQL application.

```bash
pip install chainlit openai
```

--------------------------------

### Run the Application

Source: https://docs.chainlit.io/llms-full.txt

Command to start the Chainlit application.

```bash
chainlit run qa.py
```

--------------------------------

### Install DynamoDB dependencies

Source: https://docs.chainlit.io/llms-full.txt

Install the required boto3 library to enable DynamoDB support.

```bash
pip install boto3
```

--------------------------------

### Default Project Configuration

Source: https://docs.chainlit.io/backend/config/project

Example of the project configuration structure in TOML format.

```toml
[project]
# List of environment variables to be provided by each user to use the app.
user_env = []
```

--------------------------------

### Install Chainlit React Client

Source: https://docs.chainlit.io/llms-full.txt

Run this command in your project directory to add the necessary package.

```bash
npm install @chainlit/react-client
```

--------------------------------

### Install Botbuilder Library

Source: https://docs.chainlit.io/llms-full.txt

Installs the required botbuilder-core library manually as it is not included in Chainlit dependencies.

```bash
pip install botbuilder-core
```

--------------------------------

### Configure Project Settings

Source: https://docs.chainlit.io/backend/config/project

Example configuration settings for session management, caching, and allowed origins.

```toml
mask_user_env = false

# Duration (in seconds) during which the session is saved when the connection is lost
session_timeout = 3600

# Duration (in seconds) of the user session expiry
user_session_timeout = 1296000 # 15 days

# Enable third parties caching (e.g., LangChain cache)
cache = false

# Authorized origins
allow_origins = ["*"]
```

--------------------------------

### Defining an on_chat_start hook

Source: https://docs.chainlit.io/api-reference/lifecycle-hooks/on-chat-start

This example demonstrates how to use the @on_chat_start decorator to prompt the user for their name upon starting a chat session.

```python
@on_chat_start
async def main():
    res = await AskUserMessage(content="What is your name?", timeout=30).send()
    if res:
        await Message(
            content=f"Your name is: {res['output']}"
        ).send()
```

--------------------------------

### Implementing Chat Settings

Source: https://docs.chainlit.io/api-reference/chat-settings

Example showing how to define chat settings using input widgets and the @cl.on_chat_start decorator.

```python
import chainlit as cl
from chainlit.input_widget import Select, Switch, Slider


@cl.on_chat_start
async def start():
```

--------------------------------

### Slider Configuration Example

Source: https://docs.chainlit.io/api-reference/chat-settings

Example of defining a slider component with specific parameters like min, max, step, and initial values.

```python
Slider(
  id="SAI_Width",
  label="Stability AI - Image Width",
  initial=7,
  min=1,
  max=35,
  step=0.1,
  description="Influences how strongly your generation is guided to match your prompt."
)
```

--------------------------------

### Start FastAPI server

Source: https://docs.chainlit.io/llms-full.txt

Command to launch the FastAPI application using uvicorn.

```bash
uvicorn main:app --host 0.0.0.0 --port 80
```

--------------------------------

### Install Discord Library

Source: https://docs.chainlit.io/llms-full.txt

Install the required discord library manually as it is not included in Chainlit dependencies.

```bash
pip install discord
```

--------------------------------

### Command Configuration Structure

Source: https://docs.chainlit.io/concepts/command

Example of defining a list of commands with unique IDs, icons, and descriptions.

```json
commands = [
  {
    "id": "Picture",
    "icon": "image",
    "description": "Use DALL-E"
  },
  {
    "id": "Search",
    "icon": "globe",
    "description": "Find on the web"
  }
]
```

--------------------------------

### Run Chainlit Application

Source: https://docs.chainlit.io/api-reference/elements/custom

Command to start the Chainlit application after defining custom elements.

```bash
chainlit run app.py
```

--------------------------------

### Run a Chainlit application

Source: https://docs.chainlit.io/backend/command-line

Starts the Chainlit server for a specified target file or module.

```bash
chainlit run [OPTIONS] TARGET
```

--------------------------------

### Defining Modes and Mode Options

Source: https://docs.chainlit.io/concepts/modes

Example showing the definition of mode options and a reasoning mode using cl.ModeOption and cl.Mode.

```python
cl.ModeOption(id="gpt-3.5", name="GPT-3.5", icon="bolt"),
 ]
 )

 # Define a Reasoning Effort picker
 reasoning_mode = cl.Mode(
 id="reasoning",
 name="Reasoning",
 options=[
```

--------------------------------

### Configure SQLAlchemy Data Layer

Source: https://docs.chainlit.io/data-layers/overview

Example of setting up the SQLAlchemy data layer using the @cl.data_layer decorator.

```python
from chainlit.data.sql_alchemy import SQLAlchemyDataLayer

@cl.data_layer
def get_data_layer():
    return SQLAlchemyDataLayer(conninfo="...")
```

--------------------------------

### Implementing a Tool and Message Handler

Source: https://docs.chainlit.io/concepts/step

Example showing how to define an asynchronous tool and call it within a main message handler.

```python
async def tool():
    # Simulate a running task
    await cl.sleep(2)

    return "Response from the tool!"


@cl.on_message
async def main(message: cl.Message):
    # Call the tool
    tool_res = await tool()

    # Send the final answer.
    await
```

--------------------------------

### Implementing Chat Settings Components

Source: https://docs.chainlit.io/api-reference/chat-settings

Example of defining Switch and Slider components for user-configurable chat settings.

```python
Switch(id="Streaming", label="OpenAI - Stream Tokens", initial=True),
Slider(id="Temperature", label="OpenAI - Temperature", initial=1, min=0,
```

--------------------------------

### Defining Modes and Mode Options

Source: https://docs.chainlit.io/concepts/modes

Example showing the definition of a Mode object with specific options for user selection.

```python
cl.ModeOption(id="gpt-3.5", name="GPT-3.5", icon="bolt"),
  ]
)

# Define a Reasoning Effort picker
reasoning_mode = cl.Mode(
  id="reasoning",
  name="Reasoning",
  options=
```

--------------------------------

### Implementing a Custom Element

Source: https://docs.chainlit.io/api-reference/elements/custom

Example showing how to define a CustomElement and attach it to a message in a Chainlit chat session.

```python
import chainlit as cl

@cl.on_chat_start
async def start():
    element = cl.CustomElement(name="CallFn")
    await cl.Message(content="Hello", elements=[element]).send()

@cl.on_message
```

--------------------------------

### Defining and Sending Actions

Source: https://docs.chainlit.io/api-reference/action

Example of creating a message with associated action buttons that users can interact with.

```python
await cl.Message(content="Interact with this action button:", actions=actions).send()
```

--------------------------------

### Reply to a user message in Python

Source: https://docs.chainlit.io/concepts/message

A basic example demonstrating how to create an assistant that responds to user input with a greeting.

```python
import chainlit as cl

@cl.on_message
async def main(message: cl.Message):
    await cl.Message(
        content=f"Hello, you sent: {message.content}",
    ).send()
```

--------------------------------

### Configure Chat Settings Components

Source: https://docs.chainlit.io/api-reference/chat-settings

Example of defining slider inputs and tabbed interface components for chat settings.

```python
initial=0.7,
 min=0,
 max=2,
 step=0.1,
 ),
 ],
 ),
 Tab(
 id="image",
 label="Image",
 inputs=
```

--------------------------------

### Defining Chat Settings Components

Source: https://docs.chainlit.io/api-reference/chat-settings

Example of configuring UI components like sliders for chat settings.

```javascript
className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " step"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0550AE",
 "--shiki-dark": "#B5CEA8"
 },
 children: "0.1"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " description"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"Influences how strongly your generation is guided to match your prompt.\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
 }), "\n", _jsx(_components.span, {
 className: "line",
 children: _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: " ),"
 })
 }), "\n", _jsx(_components.span, {
 className: "line",
 children: _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: " Slider("
 })
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " id"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"SAI_Width\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " label"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"Stability AI - Image Width\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " initial"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0550AE",
 "--shiki-dark": "#B5CEA8"
 },
 children: "512"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " min"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0550AE",
 "--shiki-dark": "#B5CEA8"
 },
 children: "256"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#953800",
 "--shiki-dark": "#9CDCFE"
 },
 children: " max"
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#D4D4D4"
 },
 children: "="
 }), _jsx(_components.span, {
 style: {
 color: "#0550AE",
 "--shiki-dark": "#B5CEA8"
 },
 children: "2048"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })]
```

--------------------------------

### Chat Settings Configuration

Source: https://docs.chainlit.io/api-reference/chat-settings

Example of defining chat settings using Select, Switch, and Slider components.

```python
["gpt-3.5-turbo-16k", "gpt-4", "gpt-4-32k"],
 initial_index=0
 ),
 Switch(id="Streaming", label="OpenAI - Stream Tokens", initial=True),
 Slider(
 id="Temperature"
 label="Temperature"
```

--------------------------------

### Implement Linear Ticket Custom Element

Source: https://docs.chainlit.io/api-reference/elements/custom

A full example showing the Python backend setup and the corresponding React component for rendering ticket status.

```python
import chainlit as cl

async def get_ticket():
    """Pretending to fetch data from linear"""
    return {
        "title": "Fix Authentication Bug",
        "status": "in-progress",
        "assignee": "Sarah Chen",
        "deadline": "2025-01-15",
        "tags": ["security", "high-priority", "backend"]
    }

@cl.on_message
async def on_message(msg: cl.Message):
    # Let's pretend the user is asking about a linear ticket.
    # Usually an LLM with tool calling would be used to decide to render the component or not.
    
    props = await get_ticket()
    
    ticket_element = cl.CustomElement(name="LinearTicket", props=props)
    # Store the element if we want to update it server side at a later stage.
    cl.user_session.set("ticket_el", ticket_element)
    
    await cl.Message(content="Here is the ticket information!", elements=[ticket_element]).send()
```

```jsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Clock, User, Tag } from "lucide-react"

export default function TicketStatusCard() {
  const getProgressValue = (status) => {
    const progress = {
      'open': 25,
      'in-progress': 50,
      'resolved': 75,
      'closed': 100
    }
    return progress[status] || 0
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader className="pb-2">
        <div className="flex justify-between items-center">
          <CardTitle className="text-lg font-medium">
            {props.title || 'Untitled Ticket'}
          </CardTitle>
          <Badge 
            variant="outline" 
          >
            {props.status || 'Unknown'}
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <Progress value={getProgressValue(props.status)} className="h-2" />
          
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div className="flex items-center gap-2">
              <User className="h-4 w-4 opacity-70" />
              <span>{props.assignee || 'Unassigned'}</span>
            </div>
            <div className="flex items-center gap-2">
              <Clock className="h-4 w-4 opacity-70" />
              <span>{props.deadline || 'No deadline'}</span>
            </div>
            <div className="flex items-center gap-2 col-span-2">
              <Tag className="h-4 w-4 opacity-70" />
              <span>{props.tags?.join(', ') || 'No tags'}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
```

--------------------------------

### Implement DatePicker in Chainlit

Source: https://docs.chainlit.io/llms-full.txt

Examples demonstrating how to initialize and retrieve values from DatePicker widgets in single and range selection modes.

```python
import chainlit as cl
from chainlit.input_widget import DatePicker


@cl.on_chat_start
async def start():
    settings = await cl.ChatSettings(
        [
            DatePicker(
                id="start_date",
                label="Start Date",
                placeholder="Pick a date",
                min_date="2025-01-01",
                max_date="2026-12-31",
            )
        ]
    ).send()
    value = settings["start_date"]
```

```python
import chainlit as cl
from chainlit.input_widget import DatePicker


@cl.on_chat_start
async def start():
    settings = await cl.ChatSettings(
        [
            DatePicker(
                id="date_range",
                label="Date Range",
                mode="range",
                initial=("2025-06-01", "2025-06-30"),
            )
        ]
    ).send()
    value = settings["date_range"]
```

--------------------------------

### Create and Update a Step

Source: https://docs.chainlit.io/api-reference/step-class

Demonstrates how to initialize a step using the cl.Step context manager and update its input and output properties.

```python
async def main():
    async with cl.Step(name="Parent step") as step:
        step.input = "Parent step input"
        step.output = "Parent step output"

        await cl.sleep(2)

        step.output = "Parent step output updated"
        await step.update()
```

--------------------------------

### Initialize a Chainlit project

Source: https://docs.chainlit.io/backend/command-line

Creates the default configuration file at .chainlit/config.toml.

```bash
chainlit init
```

--------------------------------

### Define Starters and Message Handler

Source: https://docs.chainlit.io/examples/openai-sql

Uses @cl.set_starters to define initial user prompts and @cl.on_message to handle incoming messages for SQL generation.

```python
@cl.set_starters
async def starters():
    return [
        cl.Starter(
            label=">50 minutes watched",
            message="Compute the number of customers who watched more than 50 minutes of video this month."
        )
    ]

@cl.on_message
async def main(message:
```

--------------------------------

### Install Chainlit via pip

Source: https://docs.chainlit.io/llms-full.txt

Use this command to install the Chainlit package in your Python environment.

```bash
pip install chainlit
```

--------------------------------

### OpenAI SQL Integration Example

Source: https://docs.chainlit.io/examples/openai-sql

This snippet demonstrates setting up a Chainlit starter message and an asynchronous message handler that calls the OpenAI chat completions API.

```python
return [
  cl.Starter(
    label=">50 minutes watched",
    message="Compute the number of customers who watched more than 50 minutes of video this month."
  )
]

@cl.on_message
async def main(message: cl.Message):
  stream = await client.chat.completions.create(
    messages=[
      {

```

--------------------------------

### Install Slack Bolt Library

Source: https://docs.chainlit.io/llms-full.txt

Install the required Slack Bolt dependency manually as it is not included in Chainlit.

```bash
pip install slack_bolt
```

--------------------------------

### Import and initialize OpenAI client

Source: https://docs.chainlit.io/llms-full.txt

Import necessary libraries and initialize the AsyncOpenAI client with instrumentation.

```python
from openai import AsyncOpenAI


import chainlit as cl

cl.instrument_openai()

client = AsyncOpenAI(api_key="YOUR_OPENAI_API_KEY")
```

--------------------------------

### Naive Message Counter Example

Source: https://docs.chainlit.io/concepts/user-session

An illustrative example showing a naive approach to tracking message counts, which is not recommended for production use.

```python
import chainlit as cl

message_count = 0

@cl.on_message
async def on_message(msg: cl.Message):
    global message_count
    message_count += 1
    await cl.Message(
        content=f"This is message number {message_count}"
    ).send()
```

--------------------------------

### Initialize and Update TaskList

Source: https://docs.chainlit.io/llms-full.txt

Demonstrates creating a TaskList, adding tasks with specific statuses, and updating the list state in the UI.

```python
import chainlit as cl


@cl.on_chat_start
async def main():
    # Create the TaskList
    task_list = cl.TaskList()
    task_list.status = "Running..."

    # Create a task and put it in the running state
    task1 = cl.Task(title="Processing data", status=cl.TaskStatus.RUNNING)
    await task_list.add_task(task1)
    # Create another task that is in the ready state
    task2 = cl.Task(title="Performing calculations")
    await task_list.add_task(task2)

    # Optional: link a message to each task to allow task navigation in the chat history
    message = await cl.Message(content="Started processing data").send()
    task1.forId = message.id

    # Update the task list in the interface
    await task_list.send()

    # Perform some action on your end
    await cl.sleep(1)

    # Update the task statuses
    task1.status = cl.TaskStatus.DONE
    task2.status = cl.TaskStatus.FAILED
    task_list.status = "Failed"
    await task_list.send()
```

--------------------------------

### Initialize OpenAI Client

Source: https://docs.chainlit.io/examples/openai-sql

Instantiate the AsyncOpenAI client with your API key.

```python
client = AsyncOpenAI(api_key="YOUR_OPENAI_API_KEY")
```

--------------------------------

### Install Presidio Dependencies

Source: https://docs.chainlit.io/llms-full.txt

Required terminal commands to install the necessary Python packages and download the Spacy language model for PII analysis.

```shell
pip install presidio-analyzer presidio-anonymizer spacy
python -m spacy download en_core_web_lg
```

--------------------------------

### Slider Configuration

Source: https://docs.chainlit.io/api-reference/chat-settings

Example of defining slider components for chat settings.

```python
Slider(
  id="OpenAI - Temperature",
  initial=1,
  min=0,
  max=2,
  step=0.1
),
Slider(
  id="SAI_Steps",
  label="Stability AI - Steps",
  initial=
```

--------------------------------

### Using on_chat_start and on_chat_end

Source: https://docs.chainlit.io/api-reference/lifecycle-hooks/on-chat-end

Demonstrates how to use the on_chat_start and on_chat_end decorators to handle session lifecycle events.

```python
@cl.on_chat_start
def start():
    print("hello", cl.user_session.get("id"))

@cl.on_chat_end
def end():
    print("goodbye", cl.user_session.get("id"))
```

--------------------------------

### CSS Variable Configuration

Source: https://docs.chainlit.io/customisation/theme

Example of defining CSS variables for theme customization.

```css
children: "\"0 0% 26%\"" }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--accent-foreground\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"210 40% 98%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--destructive\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"0 62.8% 30.6%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--destructive-foreground\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"210 40% 98%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--border\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"0 1% 26%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--input\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"0 1% 26%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--ring\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"340 92% 52%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#116329",
 "--shiki-dark": "#9CDCFE"
 },
 children: " \"--sidebar-background\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ": "
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: "\"0 0% 9%\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ","
 })] }), "\n"
```

--------------------------------

### Using on_chat_start for User Interaction

Source: https://docs.chainlit.io/api-reference/lifecycle-hooks/on-chat-start

Demonstrates how to use the on_chat_start decorator to trigger an AskUserMessage upon connection and respond with a confirmation message.

```python
from chainlit import AskUserMessage, Message, on_chat_start


@on_chat_start
async def main():
    res = await AskUserMessage(content="What is your name?", timeout=30).send()
    if res:
        await Message(
            content=f"Your name is: {res['output']}.\nChainlit installation is working!\nYou can now start building your own chainlit apps!",
        ).send()
```

--------------------------------

### Importing SQLAlchemyDataLayer

Source: https://docs.chainlit.io/data-layers/overview

Example of importing the SQLAlchemy data layer into a Chainlit application.

```python
import chainlit as cl

from chainlit.data.sql_alchemy import SQLAlchemyDataLayer
```

--------------------------------

### Initialize Langchain LLM with Chainlit Callback

Source: https://docs.chainlit.io/api-reference/integrations/langchain

Demonstrates how to instantiate an OpenAI LLM and pass the Chainlit callback handler to enable integration.

```python
llm = OpenAI(
    streaming=True,
    callbacks=[cl.LangchainCallbackHandler()]
)
```

--------------------------------

### Importing SQLAlchemyDataLayer

Source: https://docs.chainlit.io/data-layers/overview

Example of how to import the SQLAlchemy data layer into a Chainlit application.

```python
import chainlit as cl

from chainlit.data.sqlalchemy import SQLAlchemyDataLayer

cl.data_layer = SQLAlchemyDataLayer(conninfo="postgresql://user:password@localhost/dbname")
```

--------------------------------

### Send a message with a step

Source: https://docs.chainlit.io/concepts/step

Example of sending a message within a step context.

```python
cl.Message(content="This is the final answer").send()
```

--------------------------------

### Handling a user command

Source: https://docs.chainlit.io/concepts/command

Example of checking for a specific command sent by the user.

```python
if msg.command == "Picture":
 # User is using the Picture command
 pass
 pass
```

--------------------------------

### Define user starters

Source: https://docs.chainlit.io/llms-full.txt

Use the @cl.set_starters decorator to provide a list of suggested prompts for users.

```python
import chainlit as cl

@cl.set_starters
async def set_starters():
    return [
        cl.Starter(
            label="Morning routine ideation",
            message="Can you help me create a personalized morning routine that would help increase my productivity throughout the day? Start by asking me about my current habits and what activities energize me in the morning.",
            icon="/public/idea.svg",
        ),

        cl.Starter(
            label="Explain superconductors",
            message="Explain superconductors like I'm five years old.",
            icon="/public/learn.svg",
        ),
        cl.Starter(
            label="Python script for daily email reports",
            message="Write a script to automate sending daily email reports in Python, and walk me through how I would set it up.",
            icon="/public/terminal.svg",
            command="code",
        ),
        cl.Starter(
            label="Text inviting friend to wedding",
            message="Write a text asking a friend to be my plus-one at a wedding next month. I want to keep it super short and casual, and offer an out.",
            icon="/public/write.svg",
        )
    ]
```

--------------------------------

### @cl.set_starters

Source: https://docs.chainlit.io/llms-full.txt

Defines a list of starter suggestions that users can click to send a predefined message to the assistant.

```APIDOC
## @cl.set_starters

### Description
Registers a callback function that returns a list of `cl.Starter` objects to be displayed to the user.

### Parameters
- **user** (cl.User) - Optional - The current user object.
- **language** (str) - Optional - The current language setting.
- **chat_profile** (str) - Optional - The current chat profile (available since v2.11.1).

### Return Value
- **List[cl.Starter]** - A list of starter objects containing label, message, icon, and optional command.
```

--------------------------------

### Handling Multi-modal Inputs

Source: https://docs.chainlit.io/advanced-features/multi-modal

Example of processing images received from user messages.

```python
images[0].path = "r"

async def f():
    pass

await cl.Message(content=f"Received {len(images)} image(s)").send()
```

--------------------------------

### chainlit run

Source: https://docs.chainlit.io/backend/command-line

Starts a Chainlit application with support for various configuration flags.

```APIDOC
## chainlit run

### Description
Starts a Chainlit application.

### Usage
`chainlit run [OPTIONS] TARGET`

### Options
- **-w, --watch** - Reload the app when the module changes.
- **-h, --headless** - Prevents the app from opening in the browser.
- **-d, --debug** - Sets the log level to debug.
- **-c, --ci** - Runs in CI mode.
- **--no-cache** - Disables third parties cache, such as langchain.
- **--host** - Specifies a different host to run the server on.
- **--port** - Specifies a different port to run the server on.
- **--root-path** - Specifies a subpath to run the server on.
```

--------------------------------

### chainlit init

Source: https://docs.chainlit.io/backend/command-line

Initializes a new Chainlit project by creating the necessary configuration file at .chainlit/config.toml.

```APIDOC
## chainlit init

### Description
Initializes a Chainlit project by creating a configuration file located at .chainlit/config.toml.

### Usage
`chainlit init`
```

--------------------------------

### Define a Chainlit application

Source: https://docs.chainlit.io/llms-full.txt

Basic setup for a Chainlit application to be mounted as a sub-application.

```python
import chainlit as cl

@cl.on_chat_start
async def main():
    await cl.Message(content="Hello World").send()
```

--------------------------------

### Nest Steps

Source: https://docs.chainlit.io/api-reference/step-class

Illustrates how to create hierarchical steps by nesting context managers.

```python
import chainlit as cl


@cl.on_chat_start
async def main():
    async with cl.Step(name="Parent step") as parent_step:
        parent_step.input = "Parent step input"

        async with cl.Step(name="Child step") as child_step:
            child_step.input = "Child step input"
            child_step.output = "Child step output"

        parent_step.output = "Parent step output"
```

--------------------------------

### Handle Messages with Async

Source: https://docs.chainlit.io/llms-full.txt

Example of an asynchronous message handler using the @cl.on_message decorator.

```python
import chainlit as cl

@cl.on_message
async def main(message: cl.Message):
    # Your custom logic goes here

    # Send a response back to the user
    await cl.Message(
        content=f"Received: {message.content}",
    ).send()
```

--------------------------------

### Chat Settings Components

Source: https://docs.chainlit.io/api-reference/chat-settings

Examples of defining Select and Slider components for chat settings.

```APIDOC
## Select Component

### Description
Defines a dropdown selection component for chat settings.

### Parameters
- **id** (string) - Required - Unique identifier for the setting.
- **label** (string) - Required - Display label for the setting.
- **values** (list) - Required - List of available options.
- **initial_index** (integer) - Optional - The index of the default selected value.

## Slider Component

### Description
Defines a slider component for numeric chat settings.

### Parameters
- **id** (string) - Required - Unique identifier for the setting.
- **label** (string) - Required - Display label for the setting.
```

--------------------------------

### Implement Localized Starters

Source: https://docs.chainlit.io/llms-full.txt

Use the language parameter in the set_starters callback to return different starter sets based on the user's locale.

```python
@cl.set_starters
async def set_starters(current_user: cl.User, language: str):
    if language == "fr":
        return [
            cl.Starter(
                label="Routine matinale",
                message="Pouvez-vous m'aider à créer une routine matinale personnalisée ?",
                icon="/public/idea.svg",
            ),
        ]
    return [
        cl.Starter(
            label="Morning routine ideation",
            message="Can you help me create a personalized morning routine?",
            icon="/public/idea.svg",
        ),
    ]
```

--------------------------------

### Send a Step

Source: https://docs.chainlit.io/api-reference/step-class

Demonstrates creating a basic step using an asynchronous context manager to automatically send and update the step.

```python
import chainlit as cl

@cl.on_message
async def main():
    async with cl.Step(name="Test") as step:
        # Step is sent as soon as the context manager is entered
        step.input = "hello"
        step.output = "world"

    # Step is updated when the context manager is exited
```

--------------------------------

### Update Chainlit via pip

Source: https://docs.chainlit.io/guides/migration/2.1.0

Use this command to update your Chainlit installation to the latest version.

```shellscript
pip install -U chainlit
```

--------------------------------

### CSS Variable Configuration

Source: https://docs.chainlit.io/customisation/theme

Example of defining CSS variables for theme customization within the application.

```javascript
_jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"0 84.2% 60.2%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--destructive-foreground\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"210 40% 98%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--border\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"0 0% 90%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--input\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"0 0% 90%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--ring\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"340 92% 52%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--radius\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"0.75rem\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--sidebar-background\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"0 0% 98%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#116329\",\n \"--shiki-dark\": \"#9CDCFE\"\n },\n children: \" \\"--sidebar-foreground\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#0A3069\",\n \"--shiki-dark\": \"#CE9178\"\n },\n children: \"\"\"0 0% 98%\"\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#1F2328\",\n \"--shiki-dark\": \"#D4D4D4\"\n },\n children: \",\"\n })]
```