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

package/src/chatbot-sheet.css

@@ -0,0 +1,103 @@
+@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;
+}
+
+/* Sheet Title */
+.chatbot-sheet-title {
+  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-sheet.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, type CSSProperties } from "react";
+import {
+  AgentFrame,
+  type AgentElement,
+  type AgentFrameProps,
+} from "./agent-frame";
+import {
+  Sheet,
+  SheetContent,
+  SheetProvider,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+import { Tooltip } from "./tooltip";
+
+type ChatbotSheetProps = AgentFrameProps & {
+  sheetStyle?: CSSProperties;
+};
+
+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>
+    );
+  },
+);
+
+function EcforceAiIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      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/index.ts

@@ -1,3 +1,6 @@
 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,198 @@
+"use client";
+
+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>
+  );
+}
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  const { sheetOpen, setSheetOpen } = useSheet();
+  return (
+    <SheetPrimitive.Root
+      data-slot="sheet"
+      modal={false}
+      open={sheetOpen}
+      onOpenChange={setSheetOpen}
+      {...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, sheetOpen, hasOpened } = useSheet();
+  const width = isExpanded ? "848px" : "400px";
+
+  // Use transform for better performance instead of right property
+  const translateX = sheetOpen ? "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>
+  );
+}