Spaces:

Etiya
/

d2l-ui

Sleeping

feat: streaming + multi-turn + view source + doc-scoped + UX fixes

df790cc 6 months ago

1.92 kB

"use client";

import { Sidebar } from "./Sidebar";
import { TopBar } from "./TopBar";
import { Aurora } from "./Aurora";
import { useChatStore } from "@/lib/chatStore";
import { useBackendSync } from "@/lib/useBackendSync";
import clsx from "clsx";
import { usePathname } from "next/navigation";
import { useEffect } from "react";

export function AppShell({ children }: { children: React.ReactNode }) {
  const sidebarOpen = useChatStore((s) => s.sidebarOpen);
  const hydrated = useChatStore((s) => s.hydrated);
  const pathname = usePathname();
  const conversations = useChatStore((s) => s.conversations);
  const activeId = useChatStore((s) => s.activeId);
  const newConversation = useChatStore((s) => s.newConversation);

  // Backend hydration + auto-save (debounced PUT to /conversations)
  useBackendSync();

  // Ensure there is always at least one conversation when on chat route.
  // Wait until hydration completes so we don't create a placeholder before
  // the remote state arrives (which would cause a flash + redundant save).
  useEffect(() => {
    if (pathname !== "/") return;
    if (!hydrated) return;
    const hasAny = Object.keys(conversations).length > 0;
    const hasActive = activeId && conversations[activeId];
    if (!hasAny || !hasActive) newConversation();
  }, [pathname, hydrated, conversations, activeId, newConversation]);

  return (
    <div className="relative h-screen flex flex-col overflow-hidden">
      {/* Atmospheric background — fixed, behind everything */}
      <Aurora />
      <TopBar />
      <div className="relative z-10 flex-1 flex overflow-hidden min-h-0">
        <Sidebar />
        <main
          className={clsx(
            "flex-1 flex flex-col min-w-0 min-h-0 transition-[margin] duration-300 ease-atelier",
            sidebarOpen ? "md:ml-0" : "md:ml-0"
          )}
        >
          {children}
        </main>
      </div>
    </div>
  );
}

	"use client";

	import { Sidebar } from "./Sidebar";
	import { TopBar } from "./TopBar";
	import { Aurora } from "./Aurora";
	import { useChatStore } from "@/lib/chatStore";
	import { useBackendSync } from "@/lib/useBackendSync";
	import clsx from "clsx";
	import { usePathname } from "next/navigation";
	import { useEffect } from "react";

	export function AppShell({ children }: { children: React.ReactNode }) {
	const sidebarOpen = useChatStore((s) => s.sidebarOpen);
	const hydrated = useChatStore((s) => s.hydrated);
	const pathname = usePathname();
	const conversations = useChatStore((s) => s.conversations);
	const activeId = useChatStore((s) => s.activeId);
	const newConversation = useChatStore((s) => s.newConversation);

	// Backend hydration + auto-save (debounced PUT to /conversations)
	useBackendSync();

	// Ensure there is always at least one conversation when on chat route.
	// Wait until hydration completes so we don't create a placeholder before
	// the remote state arrives (which would cause a flash + redundant save).
	useEffect(() => {
	if (pathname !== "/") return;
	if (!hydrated) return;
	const hasAny = Object.keys(conversations).length > 0;
	const hasActive = activeId && conversations[activeId];
	if (!hasAny \|\| !hasActive) newConversation();
	}, [pathname, hydrated, conversations, activeId, newConversation]);

	return (
	<div className="relative h-screen flex flex-col overflow-hidden">
	{/* Atmospheric background — fixed, behind everything */}
	<Aurora />

	<TopBar />

	<div className="relative z-10 flex-1 flex overflow-hidden min-h-0">
	<Sidebar />
	<main
	className={clsx(
	"flex-1 flex flex-col min-w-0 min-h-0 transition-[margin] duration-300 ease-atelier",
	sidebarOpen ? "md:ml-0" : "md:ml-0"
	)}
	>
	{children}
	</main>
	</div>
	</div>
	);
	}