initial

.chainlit/config.toml

@@ -0,0 +1,81 @@
+[project]
+# Whether to enable telemetry (default: true). No personal data is collected.
+enable_telemetry = true
+
+# List of environment variables to be provided by each user to use the app.
+user_env = []
+
+# Duration (in seconds) during which the session is saved when the connection is lost
+session_timeout = 3600
+
+# Enable third parties caching (e.g LangChain cache)
+cache = false
+
+# Follow symlink for asset mount (see https://github.com/Chainlit/chainlit/issues/317)
+# follow_symlink = false
+
+[features]
+# Show the prompt playground
+prompt_playground = true
+
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Authorize users to upload files with messages
+multi_modal = true
+
+# Allows user to use speech to text
+[features.speech_to_text]
+    enabled = true
+    # See all languages here https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#language-string
+    language = "en-US"
+
+[UI]
+# Name of the app and chatbot.
+name = "Chainlit TutorialChatbot"
+
+# Show the readme while the conversation is empty.
+show_readme_as_default = true
+
+# Description of the app and chatbot. This is used for HTML tags.
+# description = ""
+
+# Large size content are by default collapsed for a cleaner ui
+default_collapse_content = true
+
+# The default value for the expand messages settings.
+default_expand_messages = false
+
+# Hide the chain of thought details from the user in the UI.
+hide_cot = false
+
+# Link to your github repo. This will add a github button in the UI's header.
+# github = ""
+
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+# custom_css = "/public/test.css"
+custom_css = "/public/custom_styles.css"
+# Override default MUI light theme. (Check theme.ts)
+[UI.theme.light]
+    background = "#E0F7FA"  # Light Cyan for a refreshing background
+    paper = "#FFFFFF"       # Keep the paper white for contrast
+
+    [UI.theme.light.primary]
+        main = "#0288D1"     # A vibrant blue as the primary color
+        dark = "#01579B"     # A deeper blue for darker elements
+        light = "#B3E5FC"    # A light blue for accents and highlights
+[UI.theme.dark]
+    background = "#1E3A5F"  # A deep, rich blue for the background
+    paper = "#2C3E50"       # Slightly lighter for paper elements
+
+    [UI.theme.dark.primary]
+        main = "#0288D1"     # Same vibrant blue for consistency
+        dark = "#01579B"     # A rich dark blue
+        light = "#4FC3F7"    # A lighter blue for accents
+        
+[meta]
+generated_by = "0.7.700"

.gitignore

@@ -0,0 +1,2 @@
+.env
+__pycache__/

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
+COPY --chown=user . $HOME/app
+COPY ./requirements.txt ~/app/requirements.txt
+RUN pip install -r requirements.txt
+COPY . .
+CMD ["chainlit", "run", "app.py", "--port", "7860"]

README copy.md

@@ -0,0 +1,12 @@
+---
+title: Chainlit Tutorial
+emoji: 👁
+colorFrom: pink
+colorTo: blue
+sdk: docker
+pinned: false
+license: mit
+short_description: Apps to showcase different Chainlit features
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,103 @@
+import chainlit as cl
+import os
+from dotenv import load_dotenv
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.runnables.config import RunnableConfig
+from langchain_openai import ChatOpenAI
+
+load_dotenv()
+openai_api_key = os.getenv("OPENAI_API_KEY")
+
+@cl.action_callback("hide_button")
+async def on_action(action):
+    await cl.Message(content=f"Hiding the button").send()
+    await action.remove()
+
+@cl.action_callback("show_text")
+async def on_action(action):
+    cl.user_session.set("language", "english")
+    await cl.Message(content="The button was clicked and this text was shown").send()
+
+@cl.action_callback("english")
+async def on_action(action):
+    cl.user_session.set("language", "english")
+    await cl.Message(content="Responses from the Chatbot will be in English").send()
+
+@cl.action_callback("icelandic")
+async def on_action(action):
+    cl.user_session.set("language", "icelandic")
+    await cl.Message(content="Responses from the Chatbot will be in Icelandic").send()
+
+user_template = """
+        Question:
+        {question}
+
+        Language:
+        {language}
+    """
+
+system_template = """
+    You are a helpful assistant who always speaks in a pleasant tone!
+    Do your best to answer the question succinctly and truthfully.
+    Think through your answers carefully.
+    Respond in the language provided below. If no language is provided, use Italian.
+""" 
+
+#############################################
+### On Chat Start (Session Start) Section ###
+#############################################
+@cl.on_chat_start
+async def on_chat_start():
+    # create a chain
+    chat_prompt = ChatPromptTemplate.from_messages([
+        ("system", system_template),
+        ("human", user_template)
+    ])
+    chat_model = ChatOpenAI(model="gpt-4o-mini")
+    simple_chain = chat_prompt | chat_model
+    cl.user_session.set("chain", simple_chain)
+
+    response = await cl.AskActionMessage(
+        content="Do you want to see the buttons?",
+        actions=[
+            cl.Action(name="yes", value="yes", label="✅ Yes"),
+            cl.Action(name="no", value="no", label="❌ No"),
+        ],
+    ).send()
+    if response and response.get("value") == "yes":
+        actions = [
+            cl.Action(name="hide_button", value="hide-button", description="Hide this button"),
+            cl.Action(name="show_text", value="show_text", description="Show text")
+        ]
+
+        await cl.Message(content="Different actions", actions=actions).send()
+    else: 
+        await cl.Message(content="No buttons for you").send()
+    
+    await cl.Message(content="Lets see how to change the language of the responses from the LLM").send()
+
+    actions = [
+        cl.Action(name="english", value="english", description="English"),
+        cl.Action(name="icelandic", value="icelandic", description="Icelandic")
+    ]
+
+    await cl.Message(content="Languages", actions=actions).send()
+    
+    await cl.Message(content="Ask the chatbot a question. Then click the Icelandic button and ask again.").send()
+
+
+@cl.on_message
+async def main(message: cl.Message):
+    chain = cl.user_session.get("chain")
+    language = cl.user_session.get("language", "english")
+    question = message.content
+
+    msg = cl.Message(content="")
+    # handle streaming of LLM responses 
+    async for chunk in chain.astream(
+        {"question": question, "language": language},
+        config=RunnableConfig(callbacks=[cl.LangchainCallbackHandler()]),
+    ):
+        await msg.stream_token(chunk.content)
+
+    await msg.send()

chainlit.md

@@ -0,0 +1,2 @@
+# Sideckick POC
+

public/custom_styles.css

@@ -0,0 +1,8 @@
+.message {
+    background-color: #E3F2FD !important;  /* Light Blue background */
+    color: #1A237E !important;  /* Dark Indigo text */
+}
+
+.MuiToolbar-root {
+    background-color: #b7dcf1 !important;  /* Medium Blue background */
+}

requirements.txt

@@ -0,0 +1,7 @@
+chainlit==0.7.700
+openai>=1.26.0
+langchain==0.3.0
+langchain-core==0.3.1
+langchain-community==0.3.0
+langchain-openai==0.2.0
+