Add minimize/maximize buttons

[antonio-osorio]

It would be great to be able to start the chat window in a minimized state and be able to toggle it to open and close it.

[weedon-openai]

Hey @antonio-osorio, definitely something we'd like to make easier as we expect this to be a really common form factor for ChatKit. In the meantime, you can use this snippet to get a popup style ChatKit in your own code.

function ChatKitPopup() {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const [isDisplayed, setIsDisplayed] = useState<boolean>(isOpen)
  const containerRef = useRef<HTMLDivElement>(null)

  const chatKit = useChatKit({
    // your ChatKit options...
    header: {
      rightAction: {
        icon: "close",
        onClick() {
          setIsOpen(false)
        },
      },
    },
  })

  const triggerVisible = !isOpen && !!chatKit
  return (
    <>
      {/* Chat popover container */}
      <div
        ref={containerRef}
        aria-live="polite"
        className={clsx(
          "fixed right-0 bottom-0 z-50 flex h-full max-h-[calc(100%-48px)] w-full origin-bottom-right translate-y-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-lg transition-all duration-300 sm:right-5 sm:bottom-5 sm:h-[min(600px,calc(100%-50px))] sm:max-h-[min(600px,calc(100%-50px))] sm:w-[400px] sm:translate-y-0 sm:scale-90 sm:rounded-2xl sm:opacity-0 dark:bg-gray-800",
          isDisplayed ? "block" : "hidden",
          isOpen &&
            "!translate-y-0 duration-300 sm:scale-100 sm:opacity-100 sm:delay-75 sm:duration-300",
        )}
        onTransitionEnd={() => {
          if (!isOpen) {
            setIsDisplayed(false)
          }
        }}
      >
        <ChatKit control={chatKit.control} />
      </div>
      {/* Backdrop for small screens */}
      <div
        className={clsx(
          "fixed inset-0 z-40 bg-black/30 opacity-0 transition-opacity dark:bg-black/50",
          isDisplayed ? "block sm:hidden" : "hidden",
          isOpen && "opacity-100 duration-600",
        )}
        onClick={() => setIsOpen(false)}
      />
      {/* Launcher button */}
      <button
        type="button"
        className={clsx(
          "fixed right-3 bottom-3 z-50 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-900 text-white shadow-lg transition-all duration-250 hover:scale-105 active:scale-100 md:right-5 md:bottom-5",
          !triggerVisible && "pointer-events-none scale-94 opacity-0",
          !isOpen && isDisplayed && "delay-100",
        )}
        onClick={() => {
          // Use an animation library over flushSync if you have one...
          flushSync(() => setIsDisplayed(true))
          requestAnimationFrame(() => {
            setIsOpen(true)
            chatKit.focusComposer()
          })
        }}
        tabIndex={triggerVisible ? undefined : -1}
        aria-label="Open chat"
        aria-hidden={!triggerVisible}
      >
        <MyChatIcon width="24" height="24" />
      </button>
    </>
  )
}