Styled embedded component

SupaHuman-AI · Jul 3, 2023 · ce6cb8a · ce6cb8a
1 parent b5aad18
commit ce6cb8a
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 26 deletions.
diff --git a/dist/build/static/js/bundle.min.js b/dist/build/static/js/bundle.min.js
diff --git a/public/index.html b/public/index.html
@@ -6,9 +6,9 @@
  <title>Document</title>
 </head>
 <body style="width: 100vh; height: 100vh;">
- <langflow-chat flow_id="flow_id" 
- host_url="your_host_url" 
- style="position: absolute; bottom: 350px; right: 350px;"
+ <langflow-chat window_title="Langflow Chat" online="true" online_message="We'll reply as soon as we can!" offline_message="We can't reply right now!" title="LangFlow Chat" flow_id="c9e09201-420e-49a3-9ea4-df8d88d28c24" 
+ host_url="http:https://localhost:3000" 
+ style="position: absolute; bottom: 20px; right: 20px;"
  ></langflow-chat>
 </body>
 </html>
diff --git a/src/chatWidget/chatTrigger/index.tsx b/src/chatWidget/chatTrigger/index.tsx
@@ -4,8 +4,9 @@ export default function ChatTrigger({ style, open, setOpen, triggerRef }: { styl
  return (
  <button ref={triggerRef} style={style}
  onClick={() => { setOpen(!open)}}
- className="trigger">
- {open ? <X className="h-1/2 w-1/2" /> : <MessageSquare className="h-1/2 w-1/2" />}
+ className="trigger transition-all">
+ <X className={"h-1/2 w-1/2 absolute transition-all duration-500 " + (open ? "scale-100" : "scale-0")} />
+ <MessageSquare className={"h-1/2 w-1/2 absolute transition-all duration-500 " + (open ? "scale-0" : "scale-100")} />
  </button>
  )
 }
diff --git a/src/chatWidget/chatWindow/index.tsx b/src/chatWidget/chatWindow/index.tsx
@@ -1,6 +1,6 @@
 import { Send } from 'lucide-react';
 import { getChatPosition } from '../utils';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ChatMessageType } from '../../types/chatWidget';
 import ChatMessage from './chatMessage';
 import { sendMessage } from '../../controllers';
@@ -13,17 +13,27 @@ export default function ChatWindow(
  chat_window_style, 
  error_message_style, 
  send_button_style, 
+ online = true,
+ open,
+ online_message = "We'll reply as soon as we can",
+ offline_message = "We're offline now",
+ window_title = "Chat",
  placeholder, 
  input_style, 
  input_container_style,
- addMessage, position, triggerRef, width = 288, height = 320, tweaks }:
+ addMessage, position, triggerRef, width = 450, height = 650, tweaks }:
  {
  bot_message_style?: React.CSSProperties,
  send_icon_style?:React.CSSProperties, 
  user_message_style?: React.CSSProperties,
  chat_window_style?: React.CSSProperties,
  error_message_style?: React.CSSProperties,
  send_button_style?: React.CSSProperties,
+ online?: boolean,
+ open: boolean,
+ online_message?: string,
+ offline_message?: string,
+ window_title?: string,
  placeholder?: string,
  input_style?: React.CSSProperties,
  input_container_style?: React.CSSProperties,
@@ -47,8 +57,9 @@ export default function ChatWindow(
  setValue('');
  sendMessage(hostUrl, flowId, value, tweaks)
  .then((res) => {
- if (res.data && res.data.result && res.data.result.response) {
- updateLastMessage({ message: res.data.result.response, isSend: false });
+ console.log(res);
+ if (res.data && res.data.result && res.data.result.text) {
+ updateLastMessage({ message: res.data.result.text, isSend: false });
  }
  setSendingMessage(false);
  }).catch((err) => {
@@ -72,9 +83,24 @@ export default function ChatWindow(
 
 
  return (
- <div className='absolute' style={{ top, left }}>
- <div style={chat_window_style} ref={ref} className="window">
- <div className="flex flex-col w-full h-full overflow-x-clip overflow-scroll scrollbar-hide">
+ <div className={"absolute transition-all duration-300 ease-in-out origin-bottom-right " + (open ? "scale-100" : "scale-0")} style={{ top, left }}>
+ <div style={{...chat_window_style, width: width, height: height}} ref={ref} className="window">
+ <div className="header">
+ {window_title}
+ <div className="header-subtitle">
+ {online ? 
+ <>
+ <div className="bg-green-500 rounded-full h-2 w-2"></div>
+ {online_message}</>
+ :
+ <>
+ <div className="bg-red-500 rounded-full h-2 w-2"></div>
+ {offline_message}</>
+ }
+
+ </div>
+ </div>
+ <div className="messages_container">
  {messages.map((message, index) =>
  <ChatMessage
  bot_message_style={bot_message_style}
@@ -98,7 +124,7 @@ export default function ChatWindow(
  className="input"
  />
  <button style={send_button_style} disabled={sendingMessage} onClick={handleClick}>
- <Send style={send_icon_style} className={"w-6 h-6 mr-3 " + (!sendingMessage ? 'hover:stroke-blue-400 stroke-blue-500' : "stroke-gray-400")} />
+ <Send style={send_icon_style} className={"w-6 h-6 mr-5 " + (!sendingMessage ? 'hover:stroke-blue-400 stroke-blue-500' : "stroke-gray-400")} />
  </button>
  </div>
  </div>

diff --git a/src/chatWidget/index.tsx b/src/chatWidget/index.tsx
@@ -10,6 +10,10 @@ export default function ChatWidget({ chat_trigger_style,host_url,flow_id,tweaks,
  chat_window_style, 
  error_message_style, 
  send_button_style,
+ online,
+ online_message,
+ offline_message,
+ window_title,
  chat_position, 
  placeholder, 
  input_style, 
@@ -20,6 +24,10 @@ export default function ChatWidget({ chat_trigger_style,host_url,flow_id,tweaks,
  bot_message_style?: React.CSSProperties, 
  user_message_style?: React.CSSProperties, 
  chat_window_style?: React.CSSProperties, 
+ online?: boolean,
+ online_message?: string,
+ offline_message?: string,
+ window_title?: string,
  error_message_style?: React.CSSProperties, 
  send_button_style?: React.CSSProperties, 
  placeholder?: string, 
@@ -41,7 +49,8 @@ export default function ChatWidget({ chat_trigger_style,host_url,flow_id,tweaks,
  return (
  <div>
  <ChatTrigger triggerRef={triggerRef} open={open} setOpen={setOpen} style={chat_trigger_style} />
- {open && <ChatWindow
+ <ChatWindow
+ open={open}
  send_icon_style={send_icon_style}
  bot_message_style={bot_message_style} 
  user_message_style={user_message_style} 
@@ -50,11 +59,15 @@ export default function ChatWidget({ chat_trigger_style,host_url,flow_id,tweaks,
  send_button_style={send_button_style} 
  placeholder={placeholder} 
  input_style={input_style} 
+ online={online}
+ online_message={online_message}
+ offline_message={offline_message}
+ window_title={window_title}
  input_container_style={input_container_style} 
  tweaks={tweaks} flowId={flow_id} hostUrl={host_url} 
  updateLastMessage={updateLastMessage} 
  addMessage={addMessage} messages={messages} 
- triggerRef={triggerRef} position={chat_position}/>}
+ triggerRef={triggerRef} position={chat_position}/>
  </div>
  )
 }
diff --git a/src/controllers/index.ts b/src/controllers/index.ts
@@ -3,10 +3,10 @@ import axios from "axios";
 export async function sendMessage(baseUrl: string, flowId: string, message: string, tweaks?: Object) {
  let data;
  if (tweaks) {
- data = { inputs: { input: message }, tweaks: tweaks };
+ data = { inputs: {text: message}, tweaks: tweaks };
  }
  else {
- data = { inputs: { input: message } };
+ data = { inputs: {text: message} };
  }
  let response = axios.post(`${baseUrl}/api/v1/process/${flowId}`, data,{headers:{"Content-Type": "application/json"}});
  return response;

diff --git a/src/index.css b/src/index.css
@@ -7,21 +7,30 @@
  @apply bg-blue-500 hover:bg-blue-700 w-12 h-12 text-white font-bold rounded-full flex justify-center items-center;
  }
  .window {
- @apply flex flex-col w-72 h-80 rounded-lg shadow-md border border-gray-100
+ @apply flex flex-col rounded-2xl shadow-equal overflow-hidden
+ }
+ .header-subtitle {
+ @apply flex items-center gap-2 text-sm font-light text-gray-600
+ }
+ .header {
+ @apply flex flex-col shadow-equal z-10 py-4 px-6 text-lg font-normal
+ }
+ .messages_container {
+ @apply px-4 py-2 flex flex-col w-full h-full overflow-x-clip overflow-scroll scrollbar-hide bg-gray-50 z-0
  }
  .input_container {
- @apply flex w-full h-12 items-center border-t border-gray-200
+ @apply flex w-full items-center border-t border-gray-200
  }
  .input {
- @apply px-4 py-2 h-full w-full rounded-l-lg focus:outline-none
+ @apply px-5 py-5 font-light h-full w-full focus:outline-none
  }
  .user_message {
- @apply rounded-lg w-fit max-w-full px-2 py-1 break-before-all text-right rounded-br-none bg-blue-500 text-white
+ @apply rounded-xl w-fit max-w-[90%] px-4 py-2 break-before-all text-right rounded-tr-sm bg-blue-500 text-white
  }
  .error_message {
- @apply bg-red-400 break-before-all rounded-lg rounded-bl-none text-left px-2 py-1 text-white
+ @apply bg-red-400 w-fit max-w-[90%] break-before-all rounded-xl rounded-tl-sm text-left px-4 py-2 text-white
  }
  .bot_message {
- @apply bg-gray-400 break-before-all rounded-lg rounded-bl-none text-left px-2 py-1 text-white
+ @apply bg-gray-300 w-fit max-w-[90%] break-before-all rounded-xl rounded-tl-sm text-left px-4 py-2 text-gray-800
  }
-}
+} 
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,6 +9,9 @@ customElements.define('langflow-chat', r2wc(ChatWidget, {
  chat_trigger_style: "json",
  host_url: "string",
  flow_id: "string",
+ online: "boolean",
+ online_message: "string",
+ window_title: "string",
  tweaks:"json",
  bot_message_style:"json",
  user_message_style:"json",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,7 +4,11 @@ import plugin from "tailwindcss/plugin";
 module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
- extend: {},
+ extend: {
+ boxShadow: {
+ 'equal': '0 0 10px rgba(0, 0, 0, 0.1)',
+ }
+ },
  },
  plugins: [
  plugin(function ({ addUtilities }) {