fix postion

SupaHuman-AI · Jun 29, 2023 · 1fcaf3e · 1fcaf3e
1 parent 07020a9
commit 1fcaf3e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 43 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,6 @@
  <title>Document</title>
 </head>
 <body style="width: 100vh; height: 100vh;">
- <react-app style="position: absolute; bottom: 0; right: 0;"></react-app>
+ <react-app style="position: absolute; bottom: 350px; right: 350px;"></react-app>
 </body>
 </html>
diff --git a/src/chatWidget/chatTrigger/index.tsx b/src/chatWidget/chatTrigger/index.tsx
@@ -1,11 +1,11 @@
 import { MessageSquare, X } from "lucide-react"
-export default function ChatTrigger({style, open, setOpen, triggerRef}:{style?:React.CSSProperties, open:boolean, setOpen:Function, triggerRef:React.RefObject<HTMLDivElement>|null}){
- 
+export default function ChatTrigger({ style, open, setOpen, triggerRef }: { style?: React.CSSProperties, open: boolean, setOpen: Function, triggerRef: React.RefObject<HTMLButtonElement> | null }) {
+
  return (
- <div ref={triggerRef}>
- <button style={style} onClick={()=>setOpen(!open)} className="bg-blue-500 hover:bg-blue-700 w-12 h-12 text-white font-bold rounded-full flex justify-center items-center">
-  {open?<X className="h-1/2 w-1/2"/>:<MessageSquare className="h-1/2 w-1/2"/>}
- </button>
- </div>
+ <button ref={triggerRef} style={style}
+ onClick={() => { setOpen(!open); console.log(triggerRef?.current?.getBoundingClientRect()) }}
+ className="bg-blue-500 hover:bg-blue-700 w-12 h-12 text-white font-bold rounded-full flex justify-center items-center">
+ {open ? <X className="h-1/2 w-1/2" /> : <MessageSquare className="h-1/2 w-1/2" />}
+ </button>
  )
 }
diff --git a/src/chatWidget/chatWindow/index.tsx b/src/chatWidget/chatWindow/index.tsx
@@ -1,11 +1,14 @@
 import { Send } from 'lucide-react';
 import { getChatPosition } from '../utils';
+import { useRef } from 'react';
 
-export default function ChatWindow({ position, triggerRef}: {position: string, triggerRef: React.RefObject<HTMLDivElement> }) {
- const relativePosition = getChatPosition(position, triggerRef.current!.getBoundingClientRect());
+export default function ChatWindow({ position, triggerRef, width=288, height=320}: 
+{position: string, triggerRef: React.RefObject<HTMLButtonElement>, width?: number, height?: number }) {
+ const ref = useRef<HTMLDivElement>(null);
+ const {left, top} = getChatPosition(position, triggerRef.current!.getBoundingClientRect(), width,height);
  return (
- <div className={'absolute '+ relativePosition}>
- <div className="flex flex-col bg-white w-72 h-80 rounded-lg shadow-md border border-gray-100">
+ <div className='absolute' style={{top,left}}>
+ <div ref={ref} className="flex flex-col w-72 h-80 rounded-lg shadow-md border border-gray-100">
  <div className="flex flex-col-reverse w-full h-full">
  {/* Chat messages */}
  </div>

diff --git a/src/chatWidget/index.tsx b/src/chatWidget/index.tsx
@@ -4,11 +4,11 @@ import ChatWindow from "./chatWindow";
 
 export default function ChatWidget({ trigger }: { trigger?: React.CSSProperties }) {
  const [open, setOpen] = useState(false);
- const triggerRef = useRef<HTMLDivElement>(null);
+ const triggerRef = useRef<HTMLButtonElement>(null);
  return (
  <div>
  <ChatTrigger triggerRef={triggerRef} open={open} setOpen={setOpen} style={trigger} />
- {open && <ChatWindow triggerRef={triggerRef} position="top-right"/>}
+ {open && <ChatWindow triggerRef={triggerRef} position="top"/>}
  </div>
  )
 }
diff --git a/src/chatWidget/utils.ts b/src/chatWidget/utils.ts
@@ -1,30 +1,40 @@
-export function getChatPosition(position: string,triggerPosition:DOMRect){
- if (!triggerPosition) {
- return ""; // Return empty string if trigger position is not available
- }
-
- const { top, left, width, height } = triggerPosition;
-
- const distance = 10; // Adjust this value to set the desired distance from the trigger
+export function getChatPosition(
+ position: string,
+ triggerPosition: DOMRect,
+ Cwidth:number,
+ Cheight:number
+): { top: string; left: string; } {
+ if (!triggerPosition) {
+ return { top: "0px", left: "0px" }; // Return empty string if trigger position is not available
+ }
 
- switch (position) {
- case "top-left":
- return `top-${top - height - distance}px left-${left}px`;
- case "top-center":
- return `top-${top - height - distance}px left-${left + width / 2}px -translate-x-1/2`;
- case "top-right":
- return `top-${top - height - distance}px right-${window.innerWidth - (left + width)}px`;
- case "center-left":
- return `top-${top + height / 2}px left-${left - width - distance}px -translate-y-1/2`;
- case "center-right":
- return `top-${top + height / 2}px right-${window.innerWidth - (left + width) - distance}px -translate-y-1/2`;
- case "bottom-right":
- return `bottom-${window.innerHeight - top + distance}px right-${window.innerWidth - (left + width)}px`;
- case "bottom-center":
- return `bottom-${window.innerHeight - top + distance}px left-${left + width / 2}px -translate-x-1/2`;
- case "bottom-left":
- return `bottom-${window.innerHeight - top + distance}px left-${left}px`;
- default:
- return "";
- }
- }
+ const { top, left, width, height } = triggerPosition;
+
+ const distance = 5; // Adjust this value to set the desired distance from the trigger
+
+ switch (position) {
+ case "top-left":
+ return { top: - distance - Cheight + "px", left: -Cwidth + "px" };
+ case "top-center":
+ return { top: - distance - Cheight + "px", left: width/2-Cwidth / 2 + "px" };
+ case "top-right":
+ return { top: - distance - Cheight + "px", left: width+ "px" };
+ case "center-left":
+ return { top: width/2-Cheight/2 + "px", left: -Cwidth - distance + "px" };
+ case "center-right":
+ return {
+ top: width/2-Cheight/2 + "px",
+ left: width + distance + "px",
+ };
+ case "bottom-right":
+ return { top: distance + height+ "px", left: width + "px" };
+ case "bottom-center":
+ return {
+ top: distance + height+ "px",
+ left: width/2-Cwidth / 2 + "px",
+ };
+ case "bottom-left":
+ return { top: distance + height+ "px", left: -Cwidth + "px"};
+ default:
+ return { top: - distance - Cheight + "px", left: -Cwidth + "px" }; }
+}