Feat/prompt playground (Chainlit#302)

* Rework prompt playground to support any LLM provider, templates, variables and formatted prompts.

---------

Co-authored-by: Alim TUNC <[email protected]>

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 pnpm lint-staged
-pnpm run lintPython
+pnpm run lintPython

README.md

@@ -34,6 +34,7 @@ Please see [here](https://docs.chainlit.io) for full documentation on:
 ### 🐍 Pure Python
 
 Create a new file `demo.py` with the following code:
+
 ```python
 import chainlit as cl
 
@@ -48,6 +49,7 @@ async def main(message: str):
 ```
 
 Now run it!
+
 ```
 $ chainlit run demo.py -w
 ```
@@ -59,9 +61,11 @@ $ chainlit run demo.py -w
 Check out our plug-and-play [integration](https://docs.chainlit.io/integrations/langchain) with LangChain!
 
 ### 📚 More Examples - Cookbook
+
 You can find various examples of Chainlit apps [here](https://github.com/Chainlit/cookbook) that leverage tools and services such as OpenAI, Anthropiс, LangChain, LlamaIndex, ChromaDB, Pinecone and more.
 
 ## 🛣 Roadmap
+
 - [ ] New UI elements (spreadsheet, video, carousel...)
 - [ ] Create your own UI elements via component framework
 - [ ] DAG-based chain-of-thought interface
@@ -77,4 +81,5 @@ As an open-source initiative in a rapidly evolving domain, we welcome contributi
 For detailed information on how to contribute, see [here](.github/CONTRIBUTING.md).
 
 ## License
+
 Chainlit is open-source and licensed under the [Apache 2.0](LICENSE) license.

cypress.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
         log(message) {
           console.log(message);
           return null;
-        }
+        },
       });
     },
   },

cypress/e2e/ask_file/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Upload file", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to receive and decode files", () => {

cypress/e2e/ask_multiple_files/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Upload multiple files", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to receive two files", () => {

cypress/e2e/ask_user/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer, submitMessage } from "../../support/testUtils";
 
 describe("Ask User", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should send a new message containing the user input", () => {

cypress/e2e/audio_element/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("audio", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to display an audio element", () => {
@@ -11,11 +11,13 @@ describe("audio", () => {
     cy.get(".message").should("have.length", 1);
     cy.get(".message").eq(0).find(".inline-audio").should("have.length", 1);
 
-    cy.get(".inline-audio audio").then(($el) => {
-      const audioElement = $el.get(0) as HTMLAudioElement;
-      return audioElement.play().then(() => {
-        return audioElement.duration;
-      });
-    }).should("be.greaterThan", 0);
+    cy.get(".inline-audio audio")
+      .then(($el) => {
+        const audioElement = $el.get(0) as HTMLAudioElement;
+        return audioElement.play().then(() => {
+          return audioElement.duration;
+        });
+      })
+      .should("be.greaterThan", 0);
   });
 });

cypress/e2e/auth_client_factory/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Auth Custom client", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should call the custom client", () => {

cypress/e2e/author_rename/main.py

@@ -1,5 +1,3 @@
-from langchain import LLMMathChain, OpenAI
-
 import chainlit as cl
 
 
@@ -9,10 +7,7 @@ def rename(orig_author: str):
     return rename_dict.get(orig_author, orig_author)
 
 
-@cl.on_message
-async def main(message: str):
-    llm = OpenAI(temperature=0)
-    llm_math = LLMMathChain.from_llm(llm=llm)
-    res = await llm_math.acall(message, callbacks=[cl.AsyncLangchainCallbackHandler()])
-
-    await cl.Message(content="Hello").send()
+@cl.on_chat_start
+async def main():
+    await cl.Message(author="LLMMathChain", content="2+2=4").send()
+    await cl.Message(content="The response is 4").send()

cypress/e2e/author_rename/spec.cy.ts

@@ -1,18 +1,12 @@
-import { runTestServer, submitMessage } from "../../support/testUtils";
+import { runTestServer } from "../../support/testUtils";
 
 describe("Author rename", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to rename authors", () => {
-    cy.get("#welcome-screen").should("exist");
-    submitMessage("What is 2+2?");
-    cy.get("#albert-einstein-done").should("exist");
-    cy.get("#albert-einstein-done").click();
-    cy.get(".message").eq(1).should("contain", "Albert Einstein");
-    cy.get(".message").should("have.length", 4);
-
-    cy.get(".message").eq(3).should("contain", "Assistant");
+    cy.get(".message").eq(0).should("contain", "Albert Einstein");
+    cy.get(".message").eq(1).should("contain", "Assistant");
   });
 });

cypress/e2e/avatar/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Avatar", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to display a nested CoT", () => {

cypress/e2e/cot/main.py

@@ -9,7 +9,6 @@ async def main(message: str, message_id: str):
     await cl.sleep(1)
 
     tool1_msg.content = "I need to use tool 2"
-    tool1_msg.prompt = "Tool 1 prompt"
 
     await tool1_msg.update()
 
@@ -20,7 +19,6 @@ async def main(message: str, message_id: str):
     await cl.sleep(1)
 
     tool2_msg.content = "Response from tool 2"
-    tool2_msg.prompt = "Tool 2 prompt"
 
     await tool2_msg.update()
 

cypress/e2e/cot/spec.cy.ts

@@ -1,20 +1,8 @@
 import { runTestServer, submitMessage } from "../../support/testUtils";
 
-function testPlayground(index, shouldContain: string) {
-  cy.get(".playground-button").eq(index).should("exist").click();
-
-  cy.get("#playground")
-    .should("exist")
-    .get("[contenteditable=true]")
-    .should("exist")
-    .should("contain", shouldContain);
-
-  cy.get("#playground").get("#close-playground").should("exist").click();
-}
-
 describe("Chain of Thought", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to display a nested CoT", () => {
@@ -30,10 +18,6 @@ describe("Chain of Thought", () => {
     cy.get("#tool-1-done").should("exist");
     cy.get("#tool-2-done").should("exist");
 
-    testPlayground(0, "Tool 1 prompt");
-    cy.wait(1000);
-    testPlayground(1, "Tool 2 prompt");
-
     cy.get(".message").should("have.length", 5);
   });
 });

cypress/e2e/custom_route/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Custom Route", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
     cy.visit("hello");
   });
 

cypress/e2e/db_client_factory/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Db Custom client", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should call the custom client", () => {

cypress/e2e/default_expand_cot/main.py

@@ -7,7 +7,6 @@ async def main():
         content="I need to use tool 2",
         author="Tool 1",
         indent=1,
-        prompt="Tool 1 prompt",
     ).send()
 
     await cl.Message(

cypress/e2e/default_expand_cot/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer, submitMessage } from "../../support/testUtils";
 
 describe("Default Expand", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to set the default_expand_messages field in the config to have the CoT expanded by default", () => {

cypress/e2e/error_handling/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Error Handling", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should correctly display errors", () => {

cypress/e2e/file_element/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("file", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to display a file element", () => {
@@ -11,9 +11,13 @@ describe("file", () => {
     cy.get(".message").should("have.length", 1);
     cy.get(".message").eq(0).find(".inline-file").should("have.length", 4);
 
-    cy.get("a.inline-file").eq(0).should("have.attr", "download", "example.mp4");
+    cy.get("a.inline-file")
+      .eq(0)
+      .should("have.attr", "download", "example.mp4");
     cy.get("a.inline-file").eq(1).should("have.attr", "download", "cat.jpeg");
     cy.get("a.inline-file").eq(2).should("have.attr", "download", "hello.py");
-    cy.get("a.inline-file").eq(3).should("have.attr", "download", "example.mp3");
+    cy.get("a.inline-file")
+      .eq(3)
+      .should("have.attr", "download", "example.mp3");
   });
 });

cypress/e2e/global_elements/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Global Elements", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to display inlined, side and page elements", () => {
@@ -14,12 +14,12 @@ describe("Global Elements", () => {
     // Inlined
     cy.get(".message").eq(0).find(".inline-image").should("have.length", 1);
     cy.get(".message").eq(0).find(".element-link").should("have.length", 2);
-    cy.get(".message").eq(0).find(".element-link")
+    cy.get(".message")
       .eq(0)
-      .should("contain", "text1");
-    cy.get(".message").eq(0).find(".element-link")
+      .find(".element-link")
       .eq(0)
-      .click();
+      .should("contain", "text1");
+    cy.get(".message").eq(0).find(".element-link").eq(0).click();
 
     // Side
     const sideViewTitle = cy.get("#side-view-title");

cypress/e2e/haystack_cb/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Haystack Callback", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to send messages to the UI with prompts and elements", () => {

cypress/e2e/headers/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Initial headers", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
     cy.visit("/", {
       headers: { "test-header": "test header value" },
     });

cypress/e2e/langchain_cb/spec.cy.ts

@@ -2,10 +2,10 @@ import { describeSyncAsync, runTestServer } from "../../support/testUtils";
 
 describeSyncAsync("Langchain Callback", (mode) => {
   before(() => {
-    runTestServer(mode)
+    runTestServer(mode);
   });
 
-  it("it should be able to send messages to the UI with prompts", () => {
+  it("should be able to send messages to the UI with prompts", () => {
     cy.get("#welcome-screen").should("exist");
 
     cy.get(".message").should("have.length", 1);
@@ -20,15 +20,14 @@ describeSyncAsync("Langchain Callback", (mode) => {
 
     cy.get(".playground-button").eq(0).should("exist").click();
 
-    cy.get("#playground")
+    cy.get(".formatted-editor [contenteditable]")
       .should("exist")
-      .get("[contenteditable=true]")
+      .should("contain", "This is prompt of llm1");
+
+    cy.get(".completion-editor [contenteditable]")
       .should("exist")
-      .should(
-        "contain",
-        "This is prompt of llm1\nThis is the response of tool1"
-      );
+      .should("contain", "This is the response of llm1");
 
-    cy.get("#playground").get("#close-playground").should("exist").click();
+    cy.get("#close-playground").should("exist").click();
   });
 });

cypress/e2e/llama_index_cb/spec.cy.ts

@@ -2,7 +2,7 @@ import { runTestServer } from "../../support/testUtils";
 
 describe("Llama Index Callback", () => {
   before(() => {
-    runTestServer()
+    runTestServer();
   });
 
   it("should be able to send messages to the UI with prompts and elements", () => {
@@ -22,12 +22,14 @@ describe("Llama Index Callback", () => {
 
     cy.get(".playground-button").eq(0).should("exist").click();
 
-    cy.get("#playground")
+    cy.get(".formatted-editor [contenteditable]")
       .should("exist")
-      .get("[contenteditable=true]")
+      .should("contain", "This is the LLM prompt");
+
+    cy.get(".completion-editor [contenteditable]")
       .should("exist")
-      .should("contain", "This is the LLM prompt\nThis is the LLM response");
+      .should("contain", "This is the LLM response");
 
-    cy.get("#playground").get("#close-playground").should("exist").click();
+    cy.get("#close-playground").should("exist").click();
   });
 });