Skip to content

Commit

Permalink
Merge pull request writer#322 from streamsync-cloud/chore-chat-to-cha…
Browse files Browse the repository at this point in the history
…tbot

chore: chat to chatbot
  • Loading branch information
ramedina86 authored Mar 19, 2024
2 parents b6b3187 + 60c9efb commit 19684a5
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 34 deletions.
Binary file added docs/docs/public/components/chatbot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion e2e_tests/tests/components.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const fullCheck = [
{ type: "metric", locator: `div.CoreMetric.component` },
{ type: "message", locator: `div.CoreMessage.component` },
{ type: "videoplayer", locator: `div.CoreVideoPlayer.component` },
{ type: "chat", locator: `div.CoreChat.component` },
{ type: "chatbot", locator: `div.CoreChatbot.component` },
// { type: "step", locator: `div.CoreStep.component` },
{ type: "steps", locator: `div.CoreSteps.component` },
{ type: "ratinginput", locator: `div.CoreRatingInput.component` },
Expand Down
4 changes: 2 additions & 2 deletions src/streamsync/core.py
Original file line number Diff line number Diff line change
Expand Up @@ -807,11 +807,11 @@ def _transform_page_open(self, ev) -> str:
payload = str(ev.payload)
return payload

def _transform_chat_message(self, ev) -> str:
def _transform_chatbot_message(self, ev) -> str:
payload = str(ev.payload)
return payload

def _transform_chat_action_click(self, ev) -> str:
def _transform_chatbot_action_click(self, ev) -> str:
payload = str(ev.payload)
return payload

Expand Down
18 changes: 9 additions & 9 deletions src/streamsync/ui.py
Original file line number Diff line number Diff line change
Expand Up @@ -612,7 +612,7 @@
VideoPlayerEventHandlers = TypedDict('VideoPlayerEventHandlers', {
}, total=False)

ChatProps = TypedDict('ChatProps', {
ChatbotProps = TypedDict('ChatbotProps', {
"incomingInitials": str,
"outgoingInitials": str,
"useMarkdown": str,
Expand All @@ -631,9 +631,9 @@
"cssClasses": str
}, total=False)

ChatEventHandlers = TypedDict('ChatEventHandlers', {
"ss-chat-message": Union[str, Callable],
"ss-chat-action-click": Union[str, Callable],
ChatbotEventHandlers = TypedDict('ChatbotEventHandlers', {
"ss-chatbot-message": Union[str, Callable],
"ss-chatbot-action-click": Union[str, Callable],
"ss-file-change": Union[str, Callable]
}, total=False)

Expand Down Expand Up @@ -1752,20 +1752,20 @@ def VideoPlayer(
return component

@staticmethod
def Chat(
content: ChatProps = {},
def Chatbot(
content: ChatbotProps = {},
*,
id: Optional[str] = None,
position: Optional[int] = None,
parentId: Optional[str] = None,
handlers: Optional[ChatEventHandlers] = None,
handlers: Optional[ChatbotEventHandlers] = None,
visible: Optional[Union[bool, str]] = None,
) -> Component:
"""
A chat component to build human-to-AI interactions.
A chatbot component to build human-to-AI interactions.
"""
component = StreamsyncUI.create_component(
'chat',
'chatbot',
content=content,
id=id,
position=position,
Expand Down
12 changes: 6 additions & 6 deletions ui/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -2367,10 +2367,10 @@
}
},
{
"type": "chat",
"name": "Chat",
"description": "A chat component to build human-to-AI interactions.",
"docs": "Connect it to an LLM by handling the `ss-chat-message` event, which is triggered every time the user sends a message. When the response is ready, return it.\n\nYou can add `actions` to your response, which are buttons that trigger the `ss-chat-action-click`.\n\nSee the stubs for more details.",
"type": "chatbot",
"name": "Chatbot",
"description": "A chatbot component to build human-to-AI interactions.",
"docs": "Connect it to an LLM by handling the `ss-chatbot-message` event, which is triggered every time the user sends a message. When the response is ready, return it.\n\nYou can add `actions` to your response, which are buttons that trigger the `ss-chatbot-action-click`.\n\nSee the stubs for more details.",
"category": "Content",
"fields": {
"incomingInitials": {
Expand Down Expand Up @@ -2479,11 +2479,11 @@
}
},
"events": {
"ss-chat-message": {
"ss-chatbot-message": {
"desc": "Triggered when the user sends a message.",
"stub": "def handle_message_simple(payload):\n query = payload\n\n if query == \"Hello\":\n\n\t\t# You can simply return a string\n\n return \"Hello, human.\"\n elif query == \"Surprise me\":\n\n\t\t# Or you can return a dict with actions, which are buttons\n\t\t# added to the conversation\n\n return {\n \"text\": \"I can help you with that.\",\n \"actions\": [{\n \t\"subheading\": \"Resource\",\n \t\"name\": \"Surprise\",\n \t\"desc\": \"Click to be surprised\",\n \t\"data\": \"change_title\" \n \t}]\n }\n else:\n return \"I don't know\""
},
"ss-chat-action-click": {
"ss-chatbot-action-click": {
"desc": "Handle clicks on actions.",
"stub": "def handle_action_simple(payload, state):\n \n # payload contains the \"data\" property of the action \n \n if payload == \"change_title\":\n state[\"app_title\"] = \"Surprise!\"\n state[\"app_background_color\"] = \"red\"\n \n # A message can be added to the chat\n \n return \"Hope you're surprised.\""
},
Expand Down
4 changes: 2 additions & 2 deletions ui/src/core/templateMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import CoreText from "../core_components/content/CoreText.vue";
import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
import CoreLink from "../core_components/content/CoreLink.vue";
import CoreChat from "../core_components/content/CoreChat.vue";
import CoreChatbot from "../core_components/content/CoreChatbot.vue";
import CoreTags from "../core_components/content/CoreTags.vue";
import CoreAvatar from "../core_components/content/CoreAvatar.vue";
// input
Expand Down Expand Up @@ -104,7 +104,7 @@ const templateMap = {
metric: CoreMetric,
message: CoreMessage,
videoplayer: CoreVideoPlayer,
chat: CoreChat,
chatbot: CoreChatbot,
step: CoreStep,
steps: CoreSteps,
ratinginput: CoreRating,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div ref="rootEl" class="CoreChat">
<div ref="rootEl" class="CoreChatbot">
<div ref="messageAreaEl" class="messageArea">
<div ref="messagesEl" class="messages">
<div
Expand Down Expand Up @@ -153,16 +153,16 @@ import prettyBytes from "pretty-bytes";
const MAX_FILE_SIZE = 200 * 1024 * 1024;
const description = "A chat component to build human-to-AI interactions.";
const description = "A chatbot component to build human-to-AI interactions.";
const docs = `
Connect it to an LLM by handling the \`ss-chat-message\` event, which is triggered every time the user sends a message. When the response is ready, return it.
Connect it to an LLM by handling the \`ss-chatbot-message\` event, which is triggered every time the user sends a message. When the response is ready, return it.
You can add \`actions\` to your response, which are buttons that trigger the \`ss-chat-action-click\`.
You can add \`actions\` to your response, which are buttons that trigger the \`ss-chatbot-action-click\`.
See the stubs for more details.`.trim();
const chatMessageStub = `
const chatbotMessageStub = `
def handle_message_simple(payload):
query = payload
Expand All @@ -189,7 +189,7 @@ def handle_message_simple(payload):
return "I don't know"
`.trim();
const chatActionClickStub = `
const chatbotActionClickStub = `
def handle_action_simple(payload, state):
# payload contains the "data" property of the action
Expand Down Expand Up @@ -219,7 +219,7 @@ def handle_file_upload(state, payload):
export default {
streamsync: {
name: "Chat",
name: "Chatbot",
description,
docs,
category: "Content",
Expand Down Expand Up @@ -295,13 +295,13 @@ export default {
cssClasses,
},
events: {
"ss-chat-message": {
"ss-chatbot-message": {
desc: "Triggered when the user sends a message.",
stub: chatMessageStub,
stub: chatbotMessageStub,
},
"ss-chat-action-click": {
"ss-chatbot-action-click": {
desc: "Handle clicks on actions.",
stub: chatActionClickStub,
stub: chatbotActionClickStub,
},
"ss-file-change": {
desc: "Triggered when files are uploaded",
Expand Down Expand Up @@ -399,7 +399,7 @@ function handleMessageSent() {
},
isLoading: true,
});
const event = new CustomEvent("ss-chat-message", {
const event = new CustomEvent("ss-chatbot-message", {
detail: {
payload: outgoingMessage.value,
callback: ({ payload }) => {
Expand Down Expand Up @@ -435,7 +435,7 @@ function getNormalisedCallbackResult(
function handleActionClick(action: Message["contents"]["actions"][number]) {
const { data } = action;
const event = new CustomEvent("ss-chat-action-click", {
const event = new CustomEvent("ss-chatbot-action-click", {
detail: {
payload: data,
callback: ({ payload }) => {
Expand Down Expand Up @@ -575,7 +575,7 @@ onBeforeUnmount(() => {
<style scoped>
@import "../../renderer/sharedStyles.css";
.CoreChat {
.CoreChatbot {
display: grid;
grid-template-columns: 1fr fit-content(20%);
grid-template-rows: 1fr fit-content(20%) 20%;
Expand Down

0 comments on commit 19684a5

Please sign in to comment.