@super_studio/ecforce-ai-agent-react 0.1.5 → 0.3.0

package/src/chatbot-sheet.css

@@ -0,0 +1,104 @@
+@import "./tooltip.css";
+
+/* Chatbot Trigger Button */
+.chatbot-trigger {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 50;
+  border-radius: 9999px;
+  border: 1px solid #f0f2f7;
+  background-color: #ffffff;
+  color: #0061ff;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  transition: colors 200ms ease-in-out;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+}
+
+.chatbot-trigger:hover {
+  background-color: #f0f2f7;
+}
+
+/* Sheet Content */
+.chatbot-sheet-content {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  background-color: #ffffff;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-left: 1px solid #e5e7eb;
+  width: var(--sheet-width, 400px);
+  height: 100vh;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chatbot-sheet-content.chatbot-sheet-expanded {
+  --sheet-width: 848px;
+}
+
+/* Sheet Header */
+.chatbot-sheet-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1rem;
+}
+
+/* Sheet Footer */
+.chatbot-sheet-footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+/* Invisible Title and Description (For radix accessibility) */
+.chatbot-sheet-title,
+.chatbot-sheet-description {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Sheet Description */
+.chatbot-sheet-description {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* Sheet Close */
+.chatbot-sheet-close {
+  cursor: pointer;
+}
+
+/* Initial mount animation */
+@keyframes chatbot-sheet-enter {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.chatbot-sheet-content[data-state="open"] {
+  animation: chatbot-sheet-enter 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}

package/src/{chatbot-popover.tsx → chatbot-sheet.tsx}

@@ -1,36 +1,42 @@
-import { forwardRef, useState } from "react";
+import { forwardRef, type CSSProperties } from "react";
 import {
   AgentFrame,
   type AgentElement,
   type AgentFrameProps,
 } from "./agent-frame";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-
-export const ChatbotPopover = forwardRef<AgentElement, AgentFrameProps>(
-  (props, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [hasOpened, setHasOpened] = useState(false);
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+import { Tooltip } from "./tooltip";
 
-    const handleOpenChange = (open: boolean) => {
-      setIsOpen(open);
-      if (open && !hasOpened) {
-        setHasOpened(true);
-      }
-    };
+type ChatbotSheetProps = AgentFrameProps & {
+  sheetStyle?: CSSProperties;
+};
 
+export const ChatbotSheet = forwardRef<AgentElement, ChatbotSheetProps>(
+  ({ sheetStyle, ...props }, ref) => {
     return (
-      <Popover open={isOpen} onOpenChange={handleOpenChange}>
-        <PopoverTrigger>
-          <EcforceAiIcon />
-        </PopoverTrigger>
-        <PopoverContent
+      <Sheet>
+        <Tooltip
+          side="top"
           align="end"
-          backdrop={isOpen}
-          forceMount={hasOpened || undefined} // チャットのStateを保持するために必要
-        >
+          content="AIに質問してみましょう"
+          trigger={
+            <SheetTrigger>
+              <EcforceAiIcon />
+            </SheetTrigger>
+          }
+        />
+        <SheetContent style={sheetStyle}>
+          <SheetTitle>AIに質問してみましょう</SheetTitle>
+          <SheetDescription>AIに質問してみましょう</SheetDescription>
           <AgentFrame {...props} ref={ref} />
-        </PopoverContent>
-      </Popover>
+        </SheetContent>
+      </Sheet>
     );
   },
 );
@@ -38,8 +44,8 @@ export const ChatbotPopover = forwardRef<AgentElement, AgentFrameProps>(
 function EcforceAiIcon() {
   return (
     <svg
-      width="24"
-      height="24"
+      width="18"
+      height="18"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from "./chatbot-proivder";
 export * from "./agent-frame";
-export * from "./chatbot-popover";
-export * from "./popover";
+export * from "./chatbot-sheet";
+export * from "./sheet";
+export * from "./tooltip";

package/src/sheet.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+import { useChatbot } from "./chatbot-proivder";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  const { open, setOpen } = useChatbot();
+  return (
+    <SheetPrimitive.Root
+      data-slot="sheet"
+      modal={false}
+      open={open}
+      onOpenChange={setOpen}
+      {...props}
+    />
+  );
+}
+
+const SheetTrigger = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Trigger
+    ref={ref}
+    data-slot="sheet-trigger"
+    className={`chatbot-trigger ${className || ""}`}
+    {...props}
+  />
+));
+SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
+
+const SheetClose = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Close
+    ref={ref}
+    data-slot="sheet-close"
+    className={`chatbot-sheet-close ${className || ""}`}
+    {...props}
+  />
+));
+SheetClose.displayName = SheetPrimitive.Close.displayName;
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
+>(({ className, children, style, ...props }, ref) => {
+  const { isExpanded, open, hasOpened } = useChatbot();
+  const width = isExpanded ? "848px" : "400px";
+
+  // Use transform for better performance instead of right property
+  const translateX = open ? "0" : "100%";
+
+  // Create style object with CSS custom property for smoother animation
+  const contentStyle = {
+    "--sheet-width": width,
+    transform: `translateX(${translateX})`,
+    ...style,
+  } as React.CSSProperties & { "--sheet-width": string };
+
+  return (
+    <SheetPortal forceMount={hasOpened || undefined}>
+      <SheetPrimitive.Content
+        ref={ref}
+        data-slot="sheet-content"
+        forceMount={hasOpened || undefined}
+        onInteractOutside={(e) => e.preventDefault()}
+        className={`chatbot-sheet-content ${isExpanded ? "chatbot-sheet-expanded" : ""} ${className || ""}`}
+        style={contentStyle}
+        {...props}
+      >
+        {children}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="sheet-header"
+    className={`chatbot-sheet-header ${className || ""}`}
+    {...props}
+  />
+));
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="sheet-footer"
+    className={`chatbot-sheet-footer ${className || ""}`}
+    {...props}
+  />
+));
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    data-slot="sheet-title"
+    className={`chatbot-sheet-title ${className || ""}`}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    data-slot="sheet-description"
+    className={`chatbot-sheet-description ${className || ""}`}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/src/tooltip.css

@@ -0,0 +1,18 @@
+/* Tooltip Content */
+.tooltip-content {
+  background-color: #1f2937;
+  z-index: 50;
+  max-width: 320px;
+  border-radius: 0.125rem;
+  padding: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+/* Arrow styling can be customized via arrowClassName prop */
+.tooltip-arrow {
+  fill: #1f2937;
+}

package/src/tooltip.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  Arrow,
+  Content,
+  Portal,
+  Provider,
+  Root,
+  Trigger,
+} from "@radix-ui/react-tooltip";
+import "./tooltip.css";
+
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+
+type TooltipProps = {
+  content: React.ReactNode;
+  side?: Side;
+  align?: Align;
+  trigger: React.ReactNode;
+  disabled?: boolean;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  className?: string;
+  open?: boolean;
+  alignOffset?: number;
+  sideOffset?: number;
+  arrowClassName?: string;
+  keepTooltipOpen?: boolean;
+};
+
+export function Tooltip({
+  content,
+  trigger,
+  side,
+  align,
+  disabled,
+  delayDuration,
+  skipDelayDuration,
+  className,
+  open,
+  alignOffset,
+  sideOffset,
+  arrowClassName,
+  keepTooltipOpen,
+}: TooltipProps) {
+  return (
+    <Provider
+      delayDuration={delayDuration ?? 200}
+      skipDelayDuration={skipDelayDuration ?? 200}
+    >
+      <Root open={disabled ? false : open}>
+        <Trigger
+          onClick={
+            keepTooltipOpen
+              ? (event) => {
+                  event.preventDefault();
+                }
+              : undefined
+          }
+          asChild
+        >
+          {trigger}
+        </Trigger>
+
+        <Portal>
+          <Content
+            className={`tooltip-content ${className || ""}`}
+            side={side}
+            align={align}
+            alignOffset={alignOffset}
+            sideOffset={sideOffset}
+            onPointerDownOutside={
+              keepTooltipOpen
+                ? (event) => {
+                    event.preventDefault();
+                  }
+                : undefined
+            }
+          >
+            <Arrow className={arrowClassName} />
+            {content}
+          </Content>
+        </Portal>
+      </Root>
+    </Provider>
+  );
+}

package/dist/chatbot-popover.d.ts

@@ -1,3 +0,0 @@
-import { type AgentElement, type AgentFrameProps } from "./agent-frame";
-export declare const ChatbotPopover: import("react").ForwardRefExoticComponent<AgentFrameProps & import("react").RefAttributes<AgentElement>>;
-//# sourceMappingURL=chatbot-popover.d.ts.map

package/dist/chatbot-popover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chatbot-popover.d.ts","sourceRoot":"","sources":["../src/chatbot-popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,cAAc,0GA2B1B,CAAC"}

package/dist/chatbot.css

@@ -1,166 +0,0 @@
-/* Chatbot Trigger Button */
-.chatbot-trigger {
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  z-index: 50;
-  border-radius: 9999px;
-  border: 1px solid #f0f2f7;
-  background-color: #ffffff;
-  padding: 0.375rem;
-  color: #0061ff;
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  transition: colors 200ms ease-in-out;
-  cursor: pointer;
-}
-
-.chatbot-trigger:hover {
-  background-color: #f0f2f7;
-}
-
-/* Popover Backdrop */
-.chatbot-popover-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 30;
-  background-color: rgba(0, 0, 0, 0.5);
-  animation: fade-in 150ms ease-out;
-}
-
-/* Popover Content */
-.chatbot-popover-content {
-  z-index: 50;
-  border-radius: 2rem;
-  background-color: #f7f9fa;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  outline: none;
-  overflow: hidden;
-  height: 80vh;
-  width: 600px;
-}
-
-/* Animation states */
-.chatbot-popover-content[data-state="closed"] {
-  display: none;
-}
-
-.chatbot-popover-content[data-state="open"] {
-  animation:
-    zoom-in 150ms ease-out,
-    fade-in 150ms ease-out;
-}
-
-.chatbot-popover-content[data-state="closed"] {
-  animation:
-    zoom-out 150ms ease-in,
-    fade-out 150ms ease-in;
-}
-
-/* Side-specific slide animations */
-.chatbot-popover-content[data-side="bottom"] {
-  animation:
-    zoom-in 150ms ease-out,
-    fade-in 150ms ease-out,
-    slide-in-from-top 150ms ease-out;
-}
-
-.chatbot-popover-content[data-side="top"] {
-  animation:
-    zoom-in 150ms ease-out,
-    fade-in 150ms ease-out,
-    slide-in-from-bottom 150ms ease-out;
-}
-
-.chatbot-popover-content[data-side="left"] {
-  animation:
-    zoom-in 150ms ease-out,
-    fade-in 150ms ease-out,
-    slide-in-from-right 150ms ease-out;
-}
-
-.chatbot-popover-content[data-side="right"] {
-  animation:
-    zoom-in 150ms ease-out,
-    fade-in 150ms ease-out,
-    slide-in-from-left 150ms ease-out;
-}
-
-/* Keyframe Animations */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes zoom-in {
-  from {
-    transform: scale(0.95);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes zoom-out {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.95);
-  }
-}
-
-@keyframes slide-in-from-top {
-  from {
-    transform: translateY(-0.5rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-from-bottom {
-  from {
-    transform: translateY(0.5rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-from-left {
-  from {
-    transform: translateX(-0.5rem);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-in-from-right {
-  from {
-    transform: translateX(0.5rem);
-  }
-  to {
-    transform: translateX(0);
-  }
-}

package/dist/popover.d.ts

@@ -1,9 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    backdrop?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverContent };
-//# sourceMappingURL=popover.d.ts.map

package/dist/popover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../src/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,sKASlB,CAAC;AAGH,QAAA,MAAM,cAAc;eAGL,OAAO;wCA4BrB,CAAC;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}