added animation variations to the widget

SupaHuman-AI · Jul 12, 2023 · 8cd36ce · 8cd36ce
1 parent 110ff5a
commit 8cd36ce
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 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
@@ -8,7 +8,7 @@
 <body style="width: 100vh; height: 100vh;">
  <langflow-chat window_title="Langflow Chat" online="false" 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;"
+ style="position: absolute; bottom: 300px; right: 500px;"
  ></langflow-chat>
 </body>
 </html>
diff --git a/src/chatWidget/chatWindow/index.tsx b/src/chatWidget/chatWindow/index.tsx
@@ -1,5 +1,5 @@
 import { Send } from 'lucide-react';
-import { getChatPosition } from '../utils';
+import { getAnimationOrigin, getChatPosition } from '../utils';
 import React, { useEffect, useRef, useState } from 'react';
 import { ChatMessageType } from '../../types/chatWidget';
 import ChatMessage from './chatMessage';
@@ -87,7 +87,7 @@ export default function ChatWindow(
 
 
  return (
- <div className={"absolute transition-all duration-300 ease-in-out origin-bottom-right " + (open ? "scale-100" : "scale-0")} style={windowPosition}>
+ <div className={"absolute transition-all duration-300 ease-in-out "+ getAnimationOrigin(position) + (open ? " scale-100" : " scale-0")} style={windowPosition}>
  <div style={{...chat_window_style, width: width, height: height}} ref={ref} className="window">
  <div className="header">
  {window_title}

diff --git a/src/chatWidget/utils.ts b/src/chatWidget/utils.ts
@@ -40,3 +40,27 @@ export function getChatPosition(
  default:
  return { top: - distance - Cheight + "px", left: -Cwidth + "px" }; }
 }
+
+export function getAnimationOrigin(position?:string) {
+ if(!position) return "origin-bottom-right";
+ switch (position) {
+ case "top-left":
+ return 'origin-bottom-right'
+ case "top-center":
+ return "origin-bottom";
+ case "top-right":
+ return "origin-bottom-left";
+ case "center-left":
+ return "origin-center";
+ case "center-right":
+ return "origin-center";
+ case "bottom-right":
+ return "origin-top-left";
+ case "bottom-center":
+ return "origin-top";
+ case "bottom-left":
+ return "origin-top-right"
+ default:
+ return "origin-bottom-right"
+ }
+}