@super_studio/ecforce-ai-agent-react 0.2.0 → 0.3.1

package/src/chatbot-proivder.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+
+interface ChatbotContextType {
+  hasOpened: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  isExpanded: boolean;
+  setIsExpanded: (expanded: boolean) => void;
+}
+
+const ChatbotContext = React.createContext<ChatbotContextType | undefined>(
+  undefined,
+);
+
+export function useChatbot() {
+  const context = React.useContext(ChatbotContext);
+  if (!context) {
+    throw new Error("useChatbot must be used within a ChatbotProvider");
+  }
+  return context;
+}
+
+interface ChatbotProviderProps {
+  children: React.ReactNode;
+}
+
+export function ChatbotProvider({ children }: ChatbotProviderProps) {
+  const [hasOpened, setHasOpened] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open) {
+      setHasOpened(true);
+    }
+  }, [open]);
+
+  const value = {
+    hasOpened,
+    open,
+    setOpen,
+    isExpanded,
+    setIsExpanded,
+  };
+
+  return (
+    <ChatbotContext.Provider value={value}>{children}</ChatbotContext.Provider>
+  );
+}

package/src/chatbot-sheet.css

@@ -1,5 +1,3 @@
-@import "./tooltip.css";
-
 /* Chatbot Trigger Button */
 .chatbot-trigger {
   position: fixed;
@@ -64,8 +62,9 @@
   padding: 1rem;
 }
 
-/* Sheet Title */
-.chatbot-sheet-title {
+/* Invisible Title and Description (For radix accessibility) */
+.chatbot-sheet-title,
+.chatbot-sheet-description {
   position: absolute;
   width: 1px;
   height: 1px;

package/src/chatbot-sheet.tsx

@@ -7,7 +7,7 @@ import {
 import {
   Sheet,
   SheetContent,
-  SheetProvider,
+  SheetDescription,
   SheetTitle,
   SheetTrigger,
 } from "./sheet";
@@ -20,24 +20,23 @@ type ChatbotSheetProps = AgentFrameProps & {
 export const ChatbotSheet = forwardRef<AgentElement, ChatbotSheetProps>(
   ({ sheetStyle, ...props }, ref) => {
     return (
-      <SheetProvider>
-        <Sheet>
-          <Tooltip
-            side="top"
-            align="end"
-            content="AIに質問してみましょう"
-            trigger={
-              <SheetTrigger>
-                <EcforceAiIcon />
-              </SheetTrigger>
-            }
-          />
-          <SheetContent style={sheetStyle}>
-            <SheetTitle>AIに質問してみましょう</SheetTitle>
-            <AgentFrame {...props} ref={ref} />
-          </SheetContent>
-        </Sheet>
-      </SheetProvider>
+      <Sheet>
+        <Tooltip
+          side="top"
+          align="end"
+          content="AIに質問してみましょう"
+          trigger={
+            <SheetTrigger>
+              <EcforceAiIcon />
+            </SheetTrigger>
+          }
+        />
+        <SheetContent style={sheetStyle}>
+          <SheetTitle>AIに質問してみましょう</SheetTitle>
+          <SheetDescription>AIに質問してみましょう</SheetDescription>
+          <AgentFrame {...props} ref={ref} />
+        </SheetContent>
+      </Sheet>
     );
   },
 );

package/src/index.ts

@@ -1,6 +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

@@ -2,66 +2,16 @@
 
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
-
-interface SheetContextType {
-  hasOpened: boolean;
-  sheetOpen: boolean;
-  setSheetOpen: (open: boolean) => void;
-  isExpanded: boolean;
-  setIsExpanded: (expanded: boolean) => void;
-}
-
-const SheetContext = React.createContext<SheetContextType | undefined>(
-  undefined,
-);
-
-export function useSheet() {
-  const context = React.useContext(SheetContext);
-  if (!context) {
-    throw new Error("useSheet must be used within a SheetProvider");
-  }
-  return context;
-}
-
-interface SheetProviderProps {
-  children: React.ReactNode;
-  defaultWidth?: number;
-  minWidth?: number;
-  maxWidth?: number;
-}
-
-export function SheetProvider({ children }: SheetProviderProps) {
-  const [hasOpened, setHasOpened] = React.useState(false);
-  const [sheetOpen, setSheetOpen] = React.useState(false);
-  const [isExpanded, setIsExpanded] = React.useState(false);
-
-  React.useEffect(() => {
-    if (sheetOpen) {
-      setHasOpened(true);
-    }
-  }, [sheetOpen]);
-
-  const value = {
-    hasOpened,
-    sheetOpen,
-    setSheetOpen,
-    isExpanded,
-    setIsExpanded,
-  };
-
-  return (
-    <SheetContext.Provider value={value}>{children}</SheetContext.Provider>
-  );
-}
+import { useChatbot } from "./chatbot-proivder";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  const { sheetOpen, setSheetOpen } = useSheet();
+  const { open, setOpen } = useChatbot();
   return (
     <SheetPrimitive.Root
       data-slot="sheet"
       modal={false}
-      open={sheetOpen}
-      onOpenChange={setSheetOpen}
+      open={open}
+      onOpenChange={setOpen}
       {...props}
     />
   );
@@ -103,11 +53,11 @@ const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
 >(({ className, children, style, ...props }, ref) => {
-  const { isExpanded, sheetOpen, hasOpened } = useSheet();
+  const { isExpanded, open, hasOpened } = useChatbot();
   const width = isExpanded ? "848px" : "400px";
 
   // Use transform for better performance instead of right property
-  const translateX = sheetOpen ? "0" : "100%";
+  const translateX = open ? "0" : "100%";
 
   // Create style object with CSS custom property for smoother animation
   const contentStyle = {

package/src/tooltip.tsx

@@ -8,7 +8,6 @@ import {
   Root,
   Trigger,
 } from "@radix-ui/react-tooltip";
-import "./tooltip.css";
 
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";

package/dist/chatbot-popover.css

@@ -1,168 +0,0 @@
-@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;
-  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/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/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"}

package/src/chatbot-popover.css

@@ -1,168 +0,0 @@
-@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;
-  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/src/chatbot-popover.tsx

@@ -1,54 +0,0 @@
-import { forwardRef, useState } 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);
-
-    const handleOpenChange = (open: boolean) => {
-      setIsOpen(open);
-      if (open && !hasOpened) {
-        setHasOpened(true);
-      }
-    };
-
-    return (
-      <Popover open={isOpen} onOpenChange={handleOpenChange}>
-        <PopoverTrigger>
-          <EcforceAiIcon />
-        </PopoverTrigger>
-        <PopoverContent
-          align="end"
-          backdrop={isOpen}
-          forceMount={hasOpened || undefined} // チャットのStateを保持するために必要
-        >
-          <AgentFrame {...props} ref={ref} />
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-
-function EcforceAiIcon() {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.2 13.704s3.7-.812 4.325-3.74c.624-2.93.76-3.364 1.112-3.364.352 0 .42.309.5.618.08.309.51 2.276.613 2.745.102.47.783 2.93 3.712 3.616 2.93.686 3.338.697 3.338 1.12 0 .459-2.361.859-3.338 1.122-.976.263-3.042 1.007-3.587 3.49-.534 2.482-.681 3.489-1.238 3.489-.556 0-.545-.584-.613-.87-.068-.286-.34-1.819-.5-2.494-.147-.675-1.044-2.837-2.962-3.363-1.93-.527-3.962-.847-3.962-1.373s2.134-.824 2.6-.995ZM2.462 4.613s1.785-.39 2.08-1.798c.296-1.409.365-1.615.535-1.615.17 0 .205.149.239.298s.25 1.088.296 1.317c.045.229.375 1.409 1.785 1.74 1.41.333 1.603.333 1.603.54 0 .217-1.137.412-1.603.538-.466.126-1.467.48-1.729 1.683C5.407 8.507 5.338 9 5.078 9c-.262 0-.262-.286-.296-.424-.035-.137-.16-.882-.24-1.202-.079-.321-.5-1.363-1.432-1.615-.932-.252-1.91-.413-1.91-.665 0-.252 1.023-.4 1.25-.48h.012Z"
-      />
-    </svg>
-  );
-}

package/src/popover.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <PopoverPrimitive.Trigger
-    ref={ref}
-    className={`chatbot-trigger ${className}`}
-    {...props}
-  />
-));
-PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-    backdrop?: boolean;
-  }
->(
-  (
-    {
-      className,
-      align = "center",
-      backdrop,
-      sideOffset = 4,
-      forceMount,
-      ...props
-    },
-    ref,
-  ) => (
-    <PopoverPrimitive.Portal forceMount={forceMount}>
-      <div>
-        {backdrop && <div className="chatbot-popover-backdrop" />}
-        <PopoverPrimitive.Content
-          ref={ref}
-          align={align}
-          sideOffset={sideOffset}
-          forceMount={forceMount}
-          className={`chatbot-popover-content ${className}`}
-          {...props}
-        />
-      </div>
-    </PopoverPrimitive.Portal>
-  ),
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };