Merge pull request #2 from Chainlit/wd/rework-elements

Wd/rework elements

cypress/e2e/action/main.py

@@ -1,13 +1,21 @@
 import chainlit as cl
 
 
-@cl.action("action1")
+@cl.action("test action")
 def on_action():
-    cl.send_message("Executed action 1!")
+    cl.send_message("Executed test action!")
+
+
+@cl.action("removable action")
+def on_action(action: cl.Action):
+    cl.send_message("Executed removable action!")
+    action.remove()
 
 
 @cl.on_chat_start
 def main():
-    cl.send_message("Hello, here is a clickable action!")
-    cl.send_action(name="action1", trigger="clickable action",
-                   description="Click on this to run action1!")
+    actions = [
+        cl.Action(name="test action", value="test"),
+        cl.Action(name="removable action", value="test"),
+    ]
+    cl.send_message("Hello, this is a test message!", actions=actions)

cypress/e2e/action/spec.cy.ts

@@ -7,14 +7,31 @@ describe("Action", () => {
     cy.wait(["@settings"]);
   });
 
-  it("should correcly execute the action", () => {
-    cy.get(".message").should("have.length", 1);
-    cy.get("#action-action1").should("exist");
-    cy.get("#action-action1").click();
+  it("should correcly execute actions", () => {
+    cy.get(".message")
+      .should("have.length", 1)
+      .eq(0)
+      .get("#action-test-action")
+      .should("exist")
+      .click();
     cy.wait(["@action"]);
-    const messages = cy.get(".message");
-    messages.should("have.length", 2);
 
-    messages.eq(1).should("contain", "Executed action 1!");
+    cy.get(".message").should("have.length", 2);
+    cy.get(".message").eq(1).should("contain", "Executed test action!");
+
+    cy.get(".message")
+      .eq(0)
+      .get("#action-removable-action")
+      .should("exist")
+      .click();
+    cy.wait(["@action"]);
+
+    cy.get(".message").should("have.length", 3);
+    cy.get(".message").eq(2).should("contain", "Executed removable action!");
+
+    cy.get(".message")
+      .eq(0)
+      .get("#action-removable-action")
+      .should("not.exist");
   });
 });

cypress/e2e/global_elements/main.py

@@ -0,0 +1,12 @@
+import chainlit as cl
+
+
+@cl.on_chat_start
+def start():
+    cl.LocalImage(path="./cat.jpeg", name="image1", display="inline").send()
+    cl.Text(text="Here is a side text document", name="text1", display="side").send()
+    cl.Text(text="Here is a page text document", name="text2", display="page").send()
+
+    cl.send_message(
+        content="Here is image1, a nice image of a cat! As well as text1 and text2!",
+    )

cypress/e2e/elements/spec.cy.ts → cypress/e2e/global_elements/spec.cy.ts

@@ -1,4 +1,4 @@
-describe("Elements", () => {
+describe("Global Elements", () => {
   before(() => {
     cy.intercept("/project/settings").as("settings");
     cy.visit("http://127.0.0.1:8000");

cypress/e2e/langchain_postprocess/main.py

@@ -13,4 +13,4 @@ def main():
 
 @cl.langchain_postprocess
 def postprocess(output: str):
-    return "In the end it doesn't even matter."
+    cl.send_message("In the end it doesn't even matter.")

cypress/e2e/langchain_run/main.py

@@ -14,4 +14,4 @@ def main():
 @cl.langchain_run
 def run(agent, input_str):
     res = agent("2+2")
-    return res["text"]
+    cl.send_message(res["text"])

cypress/e2e/scoped_elements/.chainlit/config.toml

@@ -0,0 +1,24 @@
+[project]
+# Name of the app and chatbot.
+name = "Chatbot"
+
+# If true (default), the app will be available to anonymous users (once deployed).
+# If false, users will need to authenticate and be part of the project to use the app.
+public = true
+
+# The project ID (found on https://cloud.chainlit.io).
+# If provided, all the message data will be stored in the cloud.
+# The project ID is required when public is set to false.
+#id = ""
+
+# 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 = []
+
+# Hide the chain of thought details from the user in the UI.
+hide_cot = false
+
+# Limit the number of requests per user.
+#request_limit = "10 per day"

cypress/e2e/scoped_elements/main.py

@@ -0,0 +1,20 @@
+import chainlit as cl
+
+
+@cl.on_chat_start
+def start():
+    elements = [
+        cl.LocalImage(path="./cat.jpeg", name="image1", display="inline"),
+        cl.Text(text="Here is a side text document", name="text1", display="side"),
+        cl.Text(text="Here is a page text document", name="text2", display="page"),
+    ]
+
+    # Element should not be inlined or referenced
+    cl.send_message(
+        content="Here is image1, a nice image of a cat! As well as text1 and text2!",
+    )
+    # Image should be inlined even if not referenced
+    cl.send_message(
+        content="Here a nice image of a cat! As well as text1 and text2!",
+        elements=elements,
+    )

cypress/e2e/scoped_elements/spec.cy.ts

@@ -0,0 +1,17 @@
+describe("Scoped Elements", () => {
+  before(() => {
+    cy.intercept("/project/settings").as("settings");
+    cy.visit("http://127.0.0.1:8000");
+    cy.wait(["@settings"]);
+  });
+
+  it("should be able to display inlined, side and page elements", () => {
+    cy.get(".message").should("have.length", 2);
+
+    cy.get(".message").eq(0).find(".inlined-image").should("have.length", 0);
+    cy.get(".message").eq(0).find(".element-link").should("have.length", 0);
+
+    cy.get(".message").eq(1).find(".inlined-image").should("have.length", 1);
+    cy.get(".message").eq(1).find(".element-link").should("have.length", 2);
+  });
+});