[mjunaidca]

Summary

• Integrate ChatKit UI using @openai/chatkit-react library
• Fix script loading issue by using Next.js Script with beforeInteractive strategy
• Implement floating chat widget with text selection "Ask" feature
• Add page/project context awareness for contextual chat

Changes

• ChatKitWidget component: Floating chat button that opens ChatKit panel
• Script loading: CDN script loaded in layout.tsx head before React hydration
• Auth integration: Requires login to use chat functionality
• Context injection: Sends page context and user info with chat requests

Test plan

• Click chat icon - should open ChatKit panel
• Verify no console errors about script loading
• Test text selection "Ask" button functionality
• Confirm auth required (redirects to login if not authenticated)

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR integrates ChatKit UI for natural language task management in the TaskFlow dashboard, implementing a floating chat widget with authentication, context awareness, and text selection features.

Key Changes:

• ChatKit React component integration with OpenAI's @openai/chatkit-react library
• Custom authentication flow using httpOnly cookies and context injection
• Floating chat widget with text selection "Ask" functionality

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 18 comments.

Show a summary per file

File	Description
web-dashboard/src/components/chat/ChatKitWidget.tsx	Main chat widget component with authentication, context extraction, and ChatKit integration
web-dashboard/src/components/chat/styles.module.css	Comprehensive styling for chat widget, buttons, menus, and overlays with responsive design
web-dashboard/src/components/chat/index.tsx	Export barrel for chat components
web-dashboard/src/app/layout.tsx	Adds ChatKit CDN script loading with beforeInteractive strategy
web-dashboard/src/app/projects/layout.tsx	Integrates ChatKitWidget into projects layout
web-dashboard/src/app/dashboard/layout.tsx	Integrates ChatKitWidget into dashboard layout
web-dashboard/package.json	Adds @openai/chatkit-react dependency
web-dashboard/pnpm-lock.yaml	Lock file updates for new dependencies
specs/005-chatkit-ui/*	Comprehensive feature specification, planning documents, and task breakdown
packages/api/AUTH_INTEGRATION.md	Deleted authentication integration documentation file

Files not reviewed (1)

• web-dashboard/pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The "Ask" button that appears on text selection lacks proper keyboard accessibility. Users who navigate with keyboard cannot trigger this functionality since it only appears on mouse selection. Consider:

1. Adding keyboard shortcut support (e.g., Ctrl+K or Cmd+K with selected text)
2. Making the button focusable when it appears
3. Announcing the button's appearance to screen readers using ARIA live regions

Example:

<div
  ref={selectionRef}
  className={styles.askButton}
  role="button"
  tabIndex={0}
  aria-label="Ask about selected text"
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleAskSelectedText();
    }
  }}
  // ... rest of props
>

[Copilot]

Memory leak: The selection event listeners are added unconditionally but never cleaned up when the component unmounts. While the cleanup function exists in the useEffect, if the component unmounts between adding listeners and the cleanup running, the listeners will persist. Consider adding a mounted ref check:

useEffect(() => {
  if (!isBrowser) return;
  
  const handleSelection = () => {
    if (!isMountedRef.current) return;
    // ... rest of handler
  };

  document.addEventListener("selectionchange", handleSelection);
  document.addEventListener("mouseup", handleSelection);

  return () => {
    document.removeEventListener("selectionchange", handleSelection);
    document.removeEventListener("mouseup", handleSelection);
  };
}, []);

[Copilot]

The getPageContext callback is recreated on every render because it depends on projectId, but projectId changes when the URL changes. This causes the useChatKit configuration to be recreated frequently, potentially causing unnecessary re-renders or connection resets. Consider memoizing with useMemo or useCallback with proper dependencies.

[Copilot]

Using <head> tag directly in Next.js App Router is not recommended and may not work as expected. The <Script> component with strategy="beforeInteractive" should be placed directly in the layout without wrapping it in a <head> tag. Next.js automatically handles script placement. Remove the <head> wrapper:

<html lang="en" className="dark">
  <Script
    src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
    strategy="beforeInteractive"
  />
  <body className="min-h-screen bg-background font-sans antialiased">
    {children}
  </body>
</html>

Suggested change

	<head>
	{/* ChatKit Web Component - must load before React components */}
	<Script
	src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
	strategy="beforeInteractive"
	/>
	</head>
	{/* ChatKit Web Component - must load before React components */}
	<Script
	src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
	strategy="beforeInteractive"
	/>

[Copilot]

The overly aggressive hiding of scroll-related elements using wildcard selectors with !important may break ChatKit's internal functionality. Selectors like [class*="scroll" i] and [class*="progress" i] are too broad and could hide legitimate UI elements that contain these words in their class names (e.g., "description", "progressive", etc.). Consider more specific selectors targeting known ChatKit classes or using a less aggressive approach.

Suggested change

	/* Hide scroll indicators */
	.chatKitContainer :global([class*="scroll" i]),
	.chatKitContainer :global([class*="Scroll"]),
	.chatKitContainer :global([id*="scroll" i]),
	.chatKitContainer :global([id*="Scroll"]),
	.chatKitContainer :global([data-scroll]),
	.chatKitContainer :global([aria-label*="scroll" i]),
	.chatKitContainer :global([aria-label*="Scroll" i]) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	}
	/* Hide progress indicators */
	.chatKitContainer :global([class*="progress" i]),
	.chatKitContainer :global([class*="Progress"]),
	.chatKitContainer :global([role="progressbar"]),
	.chatKitContainer :global([role="status"]) {
	/* Hide scroll indicators - more specific targeting */
	/* Example: Only hide known ChatKit scrollbars or indicators */
	.chatKitContainer :global(.ck-scrollbar),
	.chatKitContainer :global(.ck-scroll-indicator) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	}
	/* Hide progress indicators - more specific targeting */
	.chatKitContainer :global(.ck-progress-indicator),
	.chatKitContainer :global([role="progressbar"]) {

[Copilot]

Loading external scripts from CDN without Subresource Integrity (SRI) verification poses a security risk. If the CDN is compromised, malicious code could be injected. Consider either:

1. Self-hosting the ChatKit script
2. Adding integrity and crossOrigin attributes if the CDN supports SRI
3. At minimum, documenting this security trade-off

Example with SRI (if available):

<Script
  src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
  strategy="beforeInteractive"
  integrity="sha384-..."
  crossOrigin="anonymous"
/>

Suggested change

	strategy="beforeInteractive"
	strategy="beforeInteractive"
	integrity="sha384-..." // TODO: Replace with actual SRI hash for the script version in use
	crossOrigin="anonymous"

[Copilot]

[nitpick] The z-index values are hardcoded (1000, 1999, 2000, 2001) which may conflict with other elements in the application. Consider using CSS custom properties or a z-index scale defined in a central location to maintain consistent layering across the application:

.chatButtonContainer {
  z-index: var(--z-floating-widget, 1000);
}

.askButton {
  z-index: var(--z-overlay-below, 1999);
}

.chatKitContainer,
.loginPrompt {
  z-index: var(--z-overlay, 2000);
}

.personalizeMenu {
  z-index: var(--z-overlay-above, 2001);
}

[Copilot]

The component queries the DOM for page context (document.querySelector) inside getPageContext, which is called in the fetch interceptor. This could cause performance issues if called frequently. Consider caching the page context or only updating it when the pathname changes:

const [pageContext, setPageContext] = useState(null);

useEffect(() => {
  setPageContext(getPageContext());
}, [pathname, projectId]);

// Then use cached pageContext in fetch

[Copilot]

The selection position is calculated using getBoundingClientRect() which returns coordinates relative to the viewport, not the document. When the page is scrolled, the "Ask" button will not appear in the correct position. Add scroll offset to fix this:

const rect = range.getBoundingClientRect();
setSelectionPosition({
  x: rect.left + rect.width / 2 + window.scrollX,
  y: rect.top - 10 + window.scrollY,
});

And update the button style to use position: absolute instead of position: fixed or account for scroll in the positioning logic.

Suggested change

	x: rect.left + rect.width / 2,
	y: rect.top - 10,
	x: rect.left + rect.width / 2 + window.scrollX,
	y: rect.top - 10 + window.scrollY,

[Copilot]

The component uses user!.sub, user!.name, user!.email, and user!.role with non-null assertions after checking isAuthenticated. However, there's no guarantee that the user object is populated when isAuthenticated is true, especially during hydration or race conditions. Add explicit null checks or use optional chaining:

if (!isAuthenticated || !user) {
  throw new Error("User must be logged in to use chat");
}

const userId = user.sub;
const userInfo = {
  id: user.sub,
  name: user.name || user.email || "User",
  email: user.email,
  role: user.role,
};

Suggested change

	if (!isAuthenticated) {
	throw new Error("User must be logged in to use chat");
	}
	const userId = user!.sub;
	const pageContext = getPageContext();
	const userInfo = {
	id: user!.sub,
	name: user!.name || user!.email || "User",
	email: user!.email,
	role: user!.role,
	if (!isAuthenticated || !user) {
	throw new Error("User must be logged in to use chat");
	}
	const userId = user.sub;
	const pageContext = getPageContext();
	const userInfo = {
	id: user.sub,
	name: user.name || user.email || "User",
	email: user.email,
	role: user.role,