Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CopilotKit integration causes main app content to disappear or render incorrectly #273

Open
DSamuelHodge opened this issue Mar 16, 2024 · 4 comments
Open

CopilotKit integration causes main app content to disappear or render incorrectly #273

DSamuelHodge opened this issue Mar 16, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@DSamuelHodge
Copy link

Bug Report

Description

When wrapping the main application layout with the CopilotKitProvider component from the CopilotKit library, the application's content disappears or renders incorrectly depending on whether CopilotSidebar or CopilotPopup is used.

Steps to Reproduce

  1. Set up a Next.js application with a layout file (layout.tsx).
  2. Import and wrap the application with the CopilotKitProvider component from the CopilotKit library.
  3. Use either CopilotSidebar or CopilotPopup inside the CopilotKitProvider.

Code Snippets

layout.tsx

import type { Metadata } from 'next'
import { DM_Sans } from 'next/font/google'
import './globals.css'
import { ClerkProvider } from '@clerk/nextjs'
import { dark } from '@clerk/themes'
import { ThemeProvider } from '@/providers/theme-provider'
import ModalProvider from '@/providers/modal-provider'
import { Toaster } from '@/components/ui/toaster'
import { Toaster as SonnarToaster } from '@/components/ui/sonner'
import CopilotKitProvider from '@/providers/copilotkit-provider'

const font = DM_Sans({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'North',
  description: 'All in one Agency Solution',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={font.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <ModalProvider>
            <CopilotKitProvider>
              {children}
              <Toaster />
              <SonnarToaster position="bottom-left" />
            </CopilotKitProvider>
          </ModalProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

copilotkit-provider.tsx

'use client'

import React from 'react';
import { CopilotKit } from '@copilotkit/react-core';
import { CopilotPopup } from "@copilotkit/react-ui"; // or CopilotSidebar
import '@copilotkit/react-ui/styles.css';

const CopilotKitProvider: React.FC = () => {
  return (
    <CopilotKit url="/api/copilotkit">
      <CopilotPopup /* or CopilotSidebar */
        instructions="You are an AI assistant helping users with their writing tasks. Provide helpful suggestions and edits to improve the content."
        defaultOpen={false}
        clickOutsideToClose={true}
        hitEscapeToClose={true}
        onSetOpen={(isOpen: boolean) => {
          console.log(`Chat window ${isOpen ? 'opened' : 'closed'}`);
        }}
        shortcut="c"
        showResponseButton={true}
        className="my-custom-chat-window"
      />
    </CopilotKit>
  );
};

export default CopilotKitProvider;

Expected Behavior
The application layout and content should render correctly, with the CopilotSidebar or CopilotPopup component appearing alongside the main application content.

Actual Behavior
When using CopilotSidebar, the main application's left dashboard or sidebar content disappears completely.
When using CopilotPopup, everything except the chat popup disappears from the application.

Environment
Next.js version: Next.js v14.1.3
CopilotKit version: v0.20.1
Operating System: MacOS Monterey v12.7.4
Browser: Google Chrome
@DSamuelHodge DSamuelHodge added the bug Something isn't working label Mar 16, 2024
@ckpearson
Copy link

I've run into this too, it appears that the sidebar puts everything in a wrapper div that you have no control over the classname / styling for (without dropping into CSS and using the classname it is hardcoded to use).

The wrapper completely disrupts our flex box layout and so everything either ends up too short, or there's a huge area of whitespace where the sidebar seems to be reserving space for the expanded state even when it's collapsed.

Additionally if you render it as standalone, it expands and contracts as expected, and that works great, however the z-index sits above everything else, so things like popovers disappear behind it.

@DSamuelHodge
Copy link
Author

DSamuelHodge commented Apr 16, 2024 via email

@ataibarkai
Copy link
Collaborator

Thanks so much for this bug report and the deep-dive

@ckpearson - by " if you render it as standalone" -do you mean when using CopilotChat or CopilotPopup?

@ckpearson
Copy link

@ataibarkai I mean not wrapping children with it, so:

<App>
   <LeftPanel />
   <RightPanel />
   <CopilotSidebar />
</App>

Instead of:

<App>
   <CopilotSidebar>
     <LeftPanel />
     <RightPanel />
   </CopilotSidebar>
</App>

We've actually just gone with using the popup instead.

I know there's a headless variant by using the useCopilotChat hook, but what I'd really love is if the UI components were also exported and we could build our own UI from them instead of having to customise the sidebar / popup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ataibarkai @ckpearson @DSamuelHodge