Add ArtifactEvent model and update workflows to use it

- Updated `code_workflow.py` and `document_workflow.py` to improve chat history handling and user message storage.
- Enhanced `ArtifactWorkflow` to utilize optional fields in the `Requirement` model.
- Revised prompt instructions for clarity and conciseness in generating requirements.
- Modified UI event components to reflect changes in workflow stages and improve user feedback.
- Improved error handling for JSON parsing in artifact annotations.

.changeset/plenty-spies-tickle.md

@@ -0,0 +1,5 @@
+---
+"create-llama": patch
+---
+
+chore: create-llama monorepo

.husky/pre-commit

@@ -1,4 +1,3 @@
 pnpm format
 pnpm lint
-uvx ruff check .
-uvx ruff format . --check 
+uvx ruff format --check packages/create-llama/templates/

CHANGELOG.md

@@ -1,18 +1,5 @@
 # create-llama
 
-## 0.5.12
-
-### Patch Changes
-
-- 241d82a: Add artifacts use case (python)
-
-## 0.5.11
-
-### Patch Changes
-
-- 3960618: chore: create-llama monorepo
-- 8fe5fc2: chore: add llamaindex server package
-
 ## 0.5.10
 
 ### Patch Changes

package.json

@@ -21,12 +21,12 @@
 		"new-version": "pnpm -r build && changeset version",
 		"release": "pnpm -r build && changeset publish",
 		"release-snapshot": "pnpm -r build && changeset publish --tag snapshot",
-		"build": "pnpm -r build",
-		"e2e": "pnpm -r e2e",
-		"dev": "pnpm -r dev",
-		"format": "pnpm -r format",
-		"format:write": "pnpm -r format:write",
-		"lint": "pnpm -r lint"
+		"build": "pnpm -r --filter create-llama build",
+		"e2e": "pnpm -r --filter create-llama e2e",
+		"dev": "pnpm -r --filter create-llama dev",
+		"format": "pnpm -r --filter create-llama format",
+		"format:write": "pnpm -r --filter create-llama format:write",
+		"lint": "pnpm -r --filter create-llama lint"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.27.1",

packages/create-llama/.gitignore

@@ -59,7 +59,3 @@ __pycache__
 
 # build artifacts
 create-llama-*.tgz
-
-# copied from root
-README.md
-LICENSE.md

packages/create-llama/README.md

@@ -130,11 +130,4 @@ Pro mode is ideal for developers who want fine-grained control over their projec
 - [TS/JS docs](https://ts.llamaindex.ai/)
 - [Python docs](https://docs.llamaindex.ai/en/stable/)
 
-## LlamaIndex Server
-
-The generated code is using the LlamaIndex Server, which serves LlamaIndex Workflows and Agent Workflows via an API server. See the following docs for more information:
-
-- [LlamaIndex Server For TypeScript](./packages/server/README.md)
-- [LlamaIndex Server For Python](./python/llama-index-server/README.md)
-
 Inspired by and adapted from [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)

packages/create-llama/helpers/python.ts

@@ -562,7 +562,7 @@ const installLlamaIndexServerTemplate = async ({
     process.exit(1);
   }
 
-  await copy("*.py", path.join(root, "app"), {
+  await copy("workflow.py", path.join(root, "app"), {
     parents: true,
     cwd: path.join(templatesDir, "components", "workflows", "python", useCase),
   });

packages/create-llama/helpers/types.ts

@@ -57,8 +57,7 @@ export type TemplateUseCase =
   | "form_filling"
   | "extractor"
   | "contract_review"
-  | "agentic_rag"
-  | "artifacts";
+  | "agentic_rag";
 // Config for both file and folder
 export type FileSourceConfig =
   | {

packages/create-llama/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-llama",
-  "version": "0.5.12",
+  "version": "0.5.10",
   "description": "Create LlamaIndex-powered apps with one command",
   "keywords": [
     "rag",
@@ -17,15 +17,11 @@
     "create-llama": "./dist/index.js"
   },
   "files": [
-    "dist",
-    "README.md",
-    "LICENSE.md"
+    "dist"
   ],
   "scripts": {
-    "copy": "cp -r ../../README.md ../../LICENSE.md .",
     "build": "bash ./scripts/build.sh",
     "build:ncc": "pnpm run clean && ncc build ./index.ts -o ./dist/ --minify --no-cache --no-source-map-register",
-    "postbuild": "pnpm run copy",
     "clean": "rimraf --glob ./dist ./templates/**/__pycache__ ./templates/**/node_modules ./templates/**/poetry.lock",
     "dev": "ncc build ./index.ts -w -o dist/",
     "e2e": "playwright test",

packages/create-llama/questions/simple.ts

@@ -6,11 +6,7 @@ import { ModelConfig, TemplateFramework } from "../helpers/types";
 import { PureQuestionArgs, QuestionResults } from "./types";
 import { askPostInstallAction, questionHandlers } from "./utils";
 
-type AppType =
-  | "agentic_rag"
-  | "financial_report"
-  | "deep_research"
-  | "artifacts";
+type AppType = "agentic_rag" | "financial_report" | "deep_research";
 
 type SimpleAnswers = {
   appType: AppType;
@@ -46,12 +42,6 @@ export const askSimpleQuestions = async (
           description:
             "Researches and analyzes provided documents from multiple perspectives, generating a comprehensive report with citations to support key findings and insights.",
         },
-        {
-          title: "Artifacts",
-          value: "artifacts",
-          description:
-            "Build your own Vercel's v0 or OpenAI's canvas-styled UI.",
-        },
       ],
     },
     questionHandlers,
@@ -62,7 +52,7 @@ export const askSimpleQuestions = async (
 
   let useLlamaCloud = false;
 
-  if (appType !== "artifacts") {
+  if (appType !== "extractor" && appType !== "contract_review") {
     const { language: newLanguage } = await prompts(
       {
         type: "select",
@@ -121,10 +111,10 @@ const convertAnswers = async (
   args: PureQuestionArgs,
   answers: SimpleAnswers,
 ): Promise<QuestionResults> => {
-  const MODEL_GPT41: ModelConfig = {
+  const MODEL_GPT4o: ModelConfig = {
     provider: "openai",
     apiKey: args.openAiKey,
-    model: "gpt-4.1",
+    model: "gpt-4o",
     embeddingModel: "text-embedding-3-large",
     dimensions: 1536,
     isConfigured(): boolean {
@@ -145,19 +135,13 @@ const convertAnswers = async (
       template: "llamaindexserver",
       dataSources: EXAMPLE_10K_SEC_FILES,
       tools: getTools(["interpreter", "document_generator"]),
-      modelConfig: MODEL_GPT41,
+      modelConfig: MODEL_GPT4o,
     },
     deep_research: {
       template: "llamaindexserver",
       dataSources: EXAMPLE_10K_SEC_FILES,
       tools: [],
-      modelConfig: MODEL_GPT41,
-    },
-    artifacts: {
-      template: "llamaindexserver",
-      dataSources: [],
-      tools: [],
-      modelConfig: MODEL_GPT41,
+      modelConfig: MODEL_GPT4o,
     },
   };
 

packages/create-llama/templates/components/ui/workflows/artifacts/ui_event.jsx

@@ -1,137 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
-import { Skeleton } from "@/components/ui/skeleton";
-import { cn } from "@/lib/utils";
-import { Markdown } from "@llamaindex/chat-ui/widgets";
-import { ListChecks, Loader2, Wand2 } from "lucide-react";
-import { useEffect, useState } from "react";
-
-const STAGE_META = {
-  plan: {
-    icon: ListChecks,
-    badgeText: "Step 1/2: Planning",
-    gradient: "from-blue-100 via-blue-50 to-white",
-    progress: 33,
-    iconBg: "bg-blue-100 text-blue-600",
-    badge: "bg-blue-100 text-blue-700",
-  },
-  generate: {
-    icon: Wand2,
-    badgeText: "Step 2/2: Generating",
-    gradient: "from-violet-100 via-violet-50 to-white",
-    progress: 66,
-    iconBg: "bg-violet-100 text-violet-600",
-    badge: "bg-violet-100 text-violet-700",
-  },
-};
-
-function ArtifactWorkflowCard({ event }) {
-  const [visible, setVisible] = useState(event?.state !== "completed");
-  const [fade, setFade] = useState(false);
-
-  useEffect(() => {
-    if (event?.state === "completed") {
-      setVisible(false);
-    } else {
-      setVisible(true);
-      setFade(false);
-    }
-  }, [event?.state]);
-
-  if (!event || !visible) return null;
-
-  const { state, requirement } = event;
-  const meta = STAGE_META[state];
-
-  if (!meta) return null;
-
-  return (
-    <div className="flex justify-center items-center w-full min-h-[180px] py-2">
-      <Card
-        className={cn(
-          "w-full shadow-md rounded-xl transition-all duration-500",
-          "border-0",
-          fade && "opacity-0 pointer-events-none",
-          `bg-gradient-to-br ${meta.gradient}`,
-        )}
-        style={{
-          boxShadow:
-            "0 2px 12px 0 rgba(80, 80, 120, 0.08), 0 1px 3px 0 rgba(80, 80, 120, 0.04)",
-        }}
-      >
-        <CardHeader className="flex flex-row items-center gap-2 pb-1 pt-2 px-3">
-          <div
-            className={cn(
-              "rounded-full p-1 flex items-center justify-center",
-              meta.iconBg,
-            )}
-          >
-            <meta.icon className="w-5 h-5" />
-          </div>
-          <CardTitle className="text-base font-semibold flex items-center gap-2">
-            <Badge className={cn("ml-1", meta.badge, "text-xs px-2 py-0.5")}>
-              {meta.badgeText}
-            </Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-3 py-1">
-          {state === "plan" && (
-            <div className="flex flex-col items-center gap-2 py-2">
-              <Loader2 className="animate-spin text-blue-400 w-6 h-6 mb-1" />
-              <div className="text-sm text-blue-900 font-medium text-center">
-                Analyzing your request...
-              </div>
-              <Skeleton className="w-1/2 h-3 rounded-full mt-1" />
-            </div>
-          )}
-          {state === "generate" && (
-            <div className="flex flex-col gap-2 py-2">
-              <div className="flex items-center gap-1">
-                <Loader2 className="animate-spin text-violet-400 w-4 h-4" />
-                <span className="text-violet-900 font-medium text-sm">
-                  Working on the requirement:
-                </span>
-              </div>
-              <div className="rounded-lg border border-violet-200 bg-violet-50 px-2 py-1 max-h-24 overflow-auto text-xs">
-                {requirement ? (
-                  <Markdown content={requirement} />
-                ) : (
-                  <span className="text-violet-400 italic">
-                    No requirements available yet.
-                  </span>
-                )}
-              </div>
-            </div>
-          )}
-        </CardContent>
-        <div className="px-3 pb-2 pt-1">
-          <Progress
-            value={meta.progress}
-            className={cn(
-              "h-1 rounded-full bg-gray-200",
-              state === "plan" && "bg-blue-200",
-              state === "generate" && "bg-violet-200",
-            )}
-            indicatorClassName={cn(
-              "transition-all duration-500",
-              state === "plan" && "bg-blue-500",
-              state === "generate" && "bg-violet-500",
-            )}
-          />
-        </div>
-      </Card>
-    </div>
-  );
-}
-
-export default function Component({ events }) {
-  const aggregateEvents = () => {
-    if (!events || events.length === 0) return null;
-    return events[events.length - 1];
-  };
-
-  const event = aggregateEvents();
-
-  return <ArtifactWorkflowCard event={event} />;
-}

packages/create-llama/templates/components/workflows/python/artifacts/README-template.md

@@ -1,69 +0,0 @@
-This is a [LlamaIndex](https://www.llamaindex.ai/) project using [Workflows](https://docs.llamaindex.ai/en/stable/understanding/workflows/).
-
-## Getting Started
-
-First, setup the environment with uv:
-
-> **_Note:_** This step is not needed if you are using the dev-container.
-
-```shell
-uv sync
-```
-
-Then check the parameters that have been pre-configured in the `.env` file in this directory.
-Make sure you have set the `OPENAI_API_KEY` for the LLM.
-
-Then, run the development server:
-
-```shell
-uv run fastapi dev
-```
-
-Then open [http://localhost:8000](http://localhost:8000) with your browser to start the chat UI.
-
-To start the app optimized for **production**, run:
-
-```
-uv run fastapi run
-```
-
-## Configure LLM and Embedding Model
-
-You can configure [LLM model](https://docs.llamaindex.ai/en/stable/module_guides/models/llms) and [embedding model](https://docs.llamaindex.ai/en/stable/module_guides/models/embeddings) in [settings.py](app/settings.py).
-
-## Use Case
-
-We have prepared two artifact workflows:
-
-- [Code Workflow](app/code_workflow.py): To generate code and display it in the UI like Vercel's v0.
-- [Document Workflow](app/document_workflow.py): Generate and update a document like OpenAI's canvas.
-
-Modify the factory method in [`workflow.py`](app/workflow.py) to decide which artifact workflow to use. Without any changes the Code Workflow is used.
-
-You can start by sending an request on the [chat UI](http://localhost:8000) or you can test the `/api/chat` endpoint with the following curl request:
-
-```
-curl --location 'localhost:8000/api/chat' \
---header 'Content-Type: application/json' \
---data '{ "messages": [{ "role": "user", "content": "Create a report comparing the finances of Apple and Tesla" }] }'
-```
-
-## Customize the UI
-
-To customize the UI, you can start by modifying the [./components/ui_event.jsx](./components/ui_event.jsx) file.
-
-You can also generate a new code for the workflow using LLM by running the following command:
-
-```
-uv run generate_ui
-```
-
-## Learn More
-
-To learn more about LlamaIndex, take a look at the following resources:
-
-- [LlamaIndex Documentation](https://docs.llamaindex.ai) - learn about LlamaIndex.
-- [Workflows Introduction](https://docs.llamaindex.ai/en/stable/understanding/workflows/) - learn about LlamaIndex workflows.
-- [LlamaIndex Server](https://pypi.org/project/llama-index-server/)
-
-You can check out [the LlamaIndex GitHub repository](https://github.com/run-llama/llama_index) - your feedback and contributions are welcome!

packages/create-llama/templates/components/workflows/python/artifacts/code_workflow.py

@@ -1,365 +0,0 @@
-import re
-import time
-from typing import Any, Literal, Optional, Union
-
-from llama_index.core.chat_engine.types import ChatMessage
-from llama_index.core.llms import LLM
-from llama_index.core.memory import ChatMemoryBuffer
-from llama_index.core.prompts import PromptTemplate
-from llama_index.core.workflow import (
-    Context,
-    Event,
-    StartEvent,
-    StopEvent,
-    Workflow,
-    step,
-)
-from llama_index.server.api.models import (
-    Artifact,
-    ArtifactEvent,
-    ArtifactType,
-    ChatRequest,
-    CodeArtifactData,
-    UIEvent,
-)
-from llama_index.server.api.utils import get_last_artifact
-from pydantic import BaseModel, Field
-
-
-class Requirement(BaseModel):
-    next_step: Literal["answering", "coding"]
-    language: Optional[str] = None
-    file_name: Optional[str] = None
-    requirement: str
-
-
-class PlanEvent(Event):
-    user_msg: str
-    context: Optional[str] = None
-
-
-class GenerateArtifactEvent(Event):
-    requirement: Requirement
-
-
-class SynthesizeAnswerEvent(Event):
-    pass
-
-
-class UIEventData(BaseModel):
-    """
-    Event data for updating workflow status to the UI.
-    """
-
-    state: Literal["plan", "generate", "completed"] = Field(
-        description="The current state of the workflow. "
-        "plan: analyze and create a plan for the next step. "
-        "generate: generate the artifact based on the requirement from the previous step. "
-        "completed: the workflow is completed. "
-    )
-    requirement: Optional[str] = Field(
-        description="The requirement for generating the artifact. ",
-        default=None,
-    )
-
-
-class CodeArtifactWorkflow(Workflow):
-    """
-    A simple workflow that help generate/update the chat artifact (code, document)
-    e.g: Help create a NextJS app.
-         Update the generated code with the user's feedback.
-         Generate a guideline for the app,...
-    """
-
-    def __init__(
-        self,
-        llm: LLM,
-        chat_request: ChatRequest,
-        **kwargs: Any,
-    ):
-        """
-        Args:
-            llm: The LLM to use.
-            chat_request: The chat request from the chat app to use.
-        """
-        super().__init__(**kwargs)
-        self.llm = llm
-        self.chat_request = chat_request
-        self.last_artifact = get_last_artifact(chat_request)
-
-    @step
-    async def prepare_chat_history(self, ctx: Context, ev: StartEvent) -> PlanEvent:
-        user_msg = ev.user_msg
-        if user_msg is None:
-            raise ValueError("user_msg is required to run the workflow")
-        await ctx.set("user_msg", user_msg)
-        chat_history = ev.chat_history or []
-        chat_history.append(
-            ChatMessage(
-                role="user",
-                content=user_msg,
-            )
-        )
-        memory = ChatMemoryBuffer.from_defaults(
-            chat_history=chat_history,
-            llm=self.llm,
-        )
-        await ctx.set("memory", memory)
-        return PlanEvent(
-            user_msg=user_msg,
-            context=str(self.last_artifact.model_dump_json())
-            if self.last_artifact
-            else "",
-        )
-
-    @step
-    async def planning(
-        self, ctx: Context, event: PlanEvent
-    ) -> Union[GenerateArtifactEvent, SynthesizeAnswerEvent]:
-        """
-        Based on the conversation history and the user's request
-        this step will help to provide a good next step for the code or document generation.
-        """
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="plan",
-                    requirement=None,
-                ),
-            )
-        )
-        prompt = PromptTemplate("""
-        You are a product analyst responsible for analyzing the user's request and providing the next step for code or document generation.
-        You are helping user with their code artifact. To update the code, you need to plan a coding step.
-    
-        Follow these instructions:
-        1. Carefully analyze the conversation history and the user's request to determine what has been done and what the next step should be.
-        2. The next step must be one of the following two options:
-           - "coding": To make the changes to the current code.
-           - "answering": If you don't need to update the current code or need clarification from the user.
-        Important: Avoid telling the user to update the code themselves, you are the one who will update the code (by planning a coding step).
-        3. If the next step is "coding", you may specify the language ("typescript" or "python") and file_name if known, otherwise set them to null. 
-        4. The requirement must be provided clearly what is the user request and what need to be done for the next step in details
-           as precise and specific as possible, don't be stingy with in the requirement.
-        5. If the next step is "answering", set language and file_name to null, and the requirement should describe what to answer or explain to the user.
-        6. Be concise; only return the requirements for the next step.
-        7. The requirements must be in the following format:
-           ```json
-           {
-               "next_step": "answering" | "coding",
-               "language": "typescript" | "python" | null,
-               "file_name": string | null,
-               "requirement": string
-           }
-           ```
-
-        ## Example 1:
-        User request: Create a calculator app.
-        You should return:
-        ```json
-        {
-            "next_step": "coding",
-            "language": "typescript",
-            "file_name": "calculator.tsx",
-            "requirement": "Generate code for a calculator app that has a simple UI with a display and button layout. The display should show the current input and the result. The buttons should include basic operators, numbers, clear, and equals. The calculation should work correctly."
-        }
-        ```
-
-        ## Example 2:
-        User request: Explain how the game loop works.
-        Context: You have already generated the code for a snake game.
-        You should return:
-        ```json
-        {
-            "next_step": "answering",
-            "language": null,
-            "file_name": null,
-            "requirement": "The user is asking about the game loop. Explain how the game loop works."
-        }
-        ```
-
-        {context}
-
-        Now, plan the user's next step for this request:
-        {user_msg}
-        """).format(
-            context=""
-            if event.context is None
-            else f"## The context is: \n{event.context}\n",
-            user_msg=event.user_msg,
-        )
-        response = await self.llm.acomplete(
-            prompt=prompt,
-            formatted=True,
-        )
-        # parse the response to Requirement
-        # 1. use regex to find the json block
-        json_block = re.search(
-            r"```(?:json)?\s*([\s\S]*?)\s*```", response.text, re.IGNORECASE
-        )
-        if json_block is None:
-            raise ValueError("No JSON block found in the response.")
-        # 2. parse the json block to Requirement
-        requirement = Requirement.model_validate_json(json_block.group(1).strip())
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="generate",
-                    requirement=requirement.requirement,
-                ),
-            )
-        )
-        # Put the planning result to the memory
-        # useful for answering step
-        memory: ChatMemoryBuffer = await ctx.get("memory")
-        memory.put(
-            ChatMessage(
-                role="assistant",
-                content=f"The plan for next step: \n{response.text}",
-            )
-        )
-        await ctx.set("memory", memory)
-        if requirement.next_step == "coding":
-            return GenerateArtifactEvent(
-                requirement=requirement,
-            )
-        else:
-            return SynthesizeAnswerEvent()
-
-    @step
-    async def generate_artifact(
-        self, ctx: Context, event: GenerateArtifactEvent
-    ) -> SynthesizeAnswerEvent:
-        """
-        Generate the code based on the user's request.
-        """
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="generate",
-                    requirement=event.requirement.requirement,
-                ),
-            )
-        )
-        prompt = PromptTemplate("""
-         You are a skilled developer who can help user with coding.
-         You are given a task to generate or update a code for a given requirement.
-
-         ## Follow these instructions:
-         **1. Carefully read the user's requirements.** 
-            If any details are ambiguous or missing, make reasonable assumptions and clearly reflect those in your output.
-            If the previous code is provided:
-            + Carefully analyze the code with the request to make the right changes.
-            + Avoid making a lot of changes from the previous code if the request is not to write the code from scratch again.
-         **2. For code requests:**
-            - If the user does not specify a framework or language, default to a React component using the Next.js framework.
-            - For Next.js, use Shadcn UI components, Typescript, @types/node, @types/react, @types/react-dom, PostCSS, and TailwindCSS.
-            The import pattern should be:
-            ```
-            import { ComponentName } from "@/components/ui/component-name"
-            import { Markdown } from "@llamaindex/chat-ui"
-            import { cn } from "@/lib/utils"
-            ```
-            - Ensure the code is idiomatic, production-ready, and includes necessary imports.
-            - Only generate code relevant to the user's request—do not add extra boilerplate.
-         **3. Don't be verbose on response**
-            - No other text or comments only return the code which wrapped by ```language``` block.
-            - If the user's request is to update the code, only return the updated code.
-         **4. Only the following languages are allowed: "typescript", "python".**
-         **5. If there is no code to update, return the reason without any code block.**
-            
-         ## Example:
-         ```typescript
-         import React from "react";
-         import { Button } from "@/components/ui/button";
-         import { cn } from "@/lib/utils";
-
-         export default function MyComponent() {
-         return (
-            <div className="flex flex-col items-center justify-center h-screen">
-               <Button>Click me</Button>
-            </div>
-         );
-         }
-
-         The previous code is:
-         {previous_artifact}
-
-         Now, i have to generate the code for the following requirement:
-         {requirement}
-         ```
-        """).format(
-            previous_artifact=self.last_artifact.model_dump_json()
-            if self.last_artifact
-            else "",
-            requirement=event.requirement,
-        )
-        response = await self.llm.acomplete(
-            prompt=prompt,
-            formatted=True,
-        )
-        # Extract the code from the response
-        language_pattern = r"```(\w+)([\s\S]*)```"
-        code_match = re.search(language_pattern, response.text)
-        if code_match is None:
-            return SynthesizeAnswerEvent()
-        else:
-            code = code_match.group(2).strip()
-        # Put the generated code to the memory
-        memory: ChatMemoryBuffer = await ctx.get("memory")
-        memory.put(
-            ChatMessage(
-                role="assistant",
-                content=f"Updated the code: \n{response.text}",
-            )
-        )
-        # To show the Canvas panel for the artifact
-        ctx.write_event_to_stream(
-            ArtifactEvent(
-                data=Artifact(
-                    type=ArtifactType.CODE,
-                    created_at=int(time.time()),
-                    data=CodeArtifactData(
-                        language=event.requirement.language or "",
-                        file_name=event.requirement.file_name or "",
-                        code=code,
-                    ),
-                ),
-            )
-        )
-        return SynthesizeAnswerEvent()
-
-    @step
-    async def synthesize_answer(
-        self, ctx: Context, event: SynthesizeAnswerEvent
-    ) -> StopEvent:
-        """
-        Synthesize the answer.
-        """
-        memory: ChatMemoryBuffer = await ctx.get("memory")
-        chat_history = memory.get()
-        chat_history.append(
-            ChatMessage(
-                role="system",
-                content="""
-                You are a helpful assistant who is responsible for explaining the work to the user.
-                Based on the conversation history, provide an answer to the user's question. 
-                The user has access to the code so avoid mentioning the whole code again in your response.
-                """,
-            )
-        )
-        response_stream = await self.llm.astream_chat(
-            messages=chat_history,
-        )
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="completed",
-                ),
-            )
-        )
-        return StopEvent(result=response_stream)

packages/create-llama/templates/components/workflows/python/artifacts/document_workflow.py

@@ -1,337 +0,0 @@
-import re
-import time
-from typing import Any, Literal, Optional
-
-from llama_index.core.chat_engine.types import ChatMessage
-from llama_index.core.llms import LLM
-from llama_index.core.memory import ChatMemoryBuffer
-from llama_index.core.prompts import PromptTemplate
-from llama_index.core.workflow import (
-    Context,
-    Event,
-    StartEvent,
-    StopEvent,
-    Workflow,
-    step,
-)
-from llama_index.server.api.models import (
-    Artifact,
-    ArtifactEvent,
-    ArtifactType,
-    ChatRequest,
-    DocumentArtifactData,
-    UIEvent,
-)
-from llama_index.server.api.utils import get_last_artifact
-from pydantic import BaseModel, Field
-
-
-class DocumentRequirement(BaseModel):
-    type: Literal["markdown", "html"]
-    title: str
-    requirement: str
-
-
-class PlanEvent(Event):
-    user_msg: str
-    context: Optional[str] = None
-
-
-class GenerateArtifactEvent(Event):
-    requirement: DocumentRequirement
-
-
-class SynthesizeAnswerEvent(Event):
-    requirement: DocumentRequirement
-    generated_artifact: str
-
-
-class UIEventData(BaseModel):
-    """
-    Event data for updating workflow status to the UI.
-    """
-
-    state: Literal["plan", "generate", "completed"] = Field(
-        description="The current state of the workflow. "
-        "plan: analyze and create a plan for the next step. "
-        "generate: generate the artifact based on the requirement from the previous step. "
-        "completed: the workflow is completed. "
-    )
-    requirement: Optional[str] = Field(
-        description="The requirement for generating the artifact. ",
-        default=None,
-    )
-
-
-class DocumentArtifactWorkflow(Workflow):
-    """
-    A workflow to help generate or update document artifacts (e.g., Markdown or HTML documents).
-    Example use cases: Generate a project guideline, update documentation with user feedback, etc.
-    """
-
-    def __init__(
-        self,
-        llm: LLM,
-        chat_request: ChatRequest,
-        **kwargs: Any,
-    ):
-        """
-        Args:
-            llm: The LLM to use.
-            chat_request: The chat request from the chat app to use.
-        """
-        super().__init__(**kwargs)
-        self.llm = llm
-        self.chat_request = chat_request
-        self.last_artifact = get_last_artifact(chat_request)
-
-    @step
-    async def prepare_chat_history(self, ctx: Context, ev: StartEvent) -> PlanEvent:
-        user_msg = ev.user_msg
-        if user_msg is None:
-            raise ValueError("user_msg is required to run the workflow")
-        await ctx.set("user_msg", user_msg)
-        chat_history = ev.chat_history or []
-        chat_history.append(
-            ChatMessage(
-                role="user",
-                content=user_msg,
-            )
-        )
-        memory = ChatMemoryBuffer.from_defaults(
-            chat_history=chat_history,
-            llm=self.llm,
-        )
-        await ctx.set("memory", memory)
-        return PlanEvent(
-            user_msg=user_msg,
-            context=str(self.last_artifact.model_dump_json())
-            if self.last_artifact
-            else "",
-        )
-
-    @step
-    async def planning(self, ctx: Context, event: PlanEvent) -> GenerateArtifactEvent:
-        """
-        Based on the conversation history and the user's request,
-        this step will provide a clear requirement for the next document generation or update.
-        """
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="plan",
-                    requirement=None,
-                ),
-            )
-        )
-        prompt = PromptTemplate("""
-         You are a documentation analyst responsible for analyzing the user's request and providing requirements for document generation or update.
-         Follow these instructions:
-         1. Carefully analyze the conversation history and the user's request to determine what has been done and what the next step should be.
-         2. From the user's request, provide requirements for the next step of the document generation or update.
-         3. Do not be verbose; only return the requirements for the next step of the document generation or update.
-         4. Only the following document types are allowed: "markdown", "html".
-         5. The requirement should be in the following format:
-            ```json
-            {
-                "type": "markdown" | "html",
-                "title": string,
-                "requirement": string
-            }
-            ```
-
-         ## Example:
-         User request: Create a project guideline document.
-         You should return:
-         ```json
-         {
-             "type": "markdown",
-             "title": "Project Guideline",
-             "requirement": "Generate a Markdown document that outlines the project goals, deliverables, and timeline. Include sections for introduction, objectives, deliverables, and timeline."
-         }
-         ```
-
-         User request: Add a troubleshooting section to the guideline.
-         You should return:
-         ```json
-         {
-             "type": "markdown",
-             "title": "Project Guideline",
-             "requirement": "Add a 'Troubleshooting' section at the end of the document with common issues and solutions."
-         }
-         ```
-
-         {context}
-
-         Now, please plan for the user's request:
-         {user_msg}
-        """).format(
-            context=""
-            if event.context is None
-            else f"## The context is: \n{event.context}\n",
-            user_msg=event.user_msg,
-        )
-        response = await self.llm.acomplete(
-            prompt=prompt,
-            formatted=True,
-        )
-        # parse the response to DocumentRequirement
-        json_block = re.search(r"```json([\s\S]*)```", response.text)
-        if json_block is None:
-            raise ValueError("No json block found in the response")
-        requirement = DocumentRequirement.model_validate_json(
-            json_block.group(1).strip()
-        )
-
-        # Put the planning result to the memory
-        memory: ChatMemoryBuffer = await ctx.get("memory")
-        memory.put(
-            ChatMessage(
-                role="assistant",
-                content=f"Planning for the document generation: \n{response.text}",
-            )
-        )
-        await ctx.set("memory", memory)
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="generate",
-                    requirement=requirement.requirement,
-                ),
-            )
-        )
-        return GenerateArtifactEvent(
-            requirement=requirement,
-        )
-
-    @step
-    async def generate_artifact(
-        self, ctx: Context, event: GenerateArtifactEvent
-    ) -> SynthesizeAnswerEvent:
-        """
-        Generate or update the document based on the user's request.
-        """
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="generate",
-                    requirement=event.requirement.requirement,
-                ),
-            )
-        )
-        prompt = PromptTemplate("""
-         You are a skilled technical writer who can help users with documentation.
-         You are given a task to generate or update a document for a given requirement.
-
-         ## Follow these instructions:
-         **1. Carefully read the user's requirements.**
-            If any details are ambiguous or missing, make reasonable assumptions and clearly reflect those in your output.
-            If the previous document is provided:
-            + Carefully analyze the document with the request to make the right changes.
-            + Avoid making unnecessary changes from the previous document if the request is not to rewrite it from scratch.
-         **2. For document requests:**
-            - If the user does not specify a type, default to Markdown.
-            - Ensure the document is clear, well-structured, and grammatically correct.
-            - Only generate content relevant to the user's request—do not add extra boilerplate.
-         **3. Do not be verbose in your response.**
-            - No other text or comments; only return the document content wrapped by the appropriate code block (```markdown or ```html).
-            - If the user's request is to update the document, only return the updated document.
-         **4. Only the following types are allowed: "markdown", "html".**
-         **5. If there is no change to the document, return the reason without any code block.**
-
-         ## Example:
-         ```markdown
-         # Project Guideline
-         
-         ## Introduction
-         ...
-         ```
-
-         The previous content is:
-         {previous_artifact}
-
-         Now, please generate the document for the following requirement:
-         {requirement}
-         """).format(
-            previous_artifact=self.last_artifact.model_dump_json()
-            if self.last_artifact
-            else "",
-            requirement=event.requirement,
-        )
-        response = await self.llm.acomplete(
-            prompt=prompt,
-            formatted=True,
-        )
-        # Extract the document from the response
-        language_pattern = r"```(markdown|html)([\s\S]*)```"
-        doc_match = re.search(language_pattern, response.text)
-        if doc_match is None:
-            return SynthesizeAnswerEvent(
-                requirement=event.requirement,
-                generated_artifact="There is no change to the document. "
-                + response.text.strip(),
-            )
-        content = doc_match.group(2).strip()
-        doc_type = doc_match.group(1)
-        # Put the generated document to the memory
-        memory: ChatMemoryBuffer = await ctx.get("memory")
-        memory.put(
-            ChatMessage(
-                role="assistant",
-                content=f"Generated document: \n{response.text}",
-            )
-        )
-        # To show the Canvas panel for the artifact
-        ctx.write_event_to_stream(
-            ArtifactEvent(
-                data=Artifact(
-                    type=ArtifactType.DOCUMENT,
-                    created_at=int(time.time()),
-                    data=DocumentArtifactData(
-                        title=event.requirement.title,
-                        content=content,
-                        type=doc_type,  # type: ignore
-                    ),
-                ),
-            )
-        )
-        return SynthesizeAnswerEvent(
-            requirement=event.requirement,
-            generated_artifact=response.text,
-        )
-
-    @step
-    async def synthesize_answer(
-        self, ctx: Context, event: SynthesizeAnswerEvent
-    ) -> StopEvent:
-        """
-        Synthesize the answer for the user.
-        """
-        memory: ChatMemoryBuffer = await ctx.get("memory")
-        chat_history = memory.get()
-        chat_history.append(
-            ChatMessage(
-                role="system",
-                content="""
-                Your responsibility is to explain the work to the user.
-                If there is no document to update, explain the reason.
-                If the document is updated, just summarize what changed. Don't need to include the whole document again in the response.
-                """,
-            )
-        )
-        response_stream = await self.llm.astream_chat(
-            messages=chat_history,
-        )
-        ctx.write_event_to_stream(
-            UIEvent(
-                type="ui_event",
-                data=UIEventData(
-                    state="completed",
-                    requirement=event.requirement.requirement,
-                ),
-            )
-        )
-        return StopEvent(result=response_stream)

packages/create-llama/templates/components/workflows/python/artifacts/workflow.py

@@ -1,15 +0,0 @@
-from app.code_workflow import CodeArtifactWorkflow
-
-# from app.document_workflow import DocumentArtifactWorkflow to generate documents
-from llama_index.core.workflow import Workflow
-from llama_index.llms.openai import OpenAI
-from llama_index.server.api.models import ChatRequest
-
-
-def create_workflow(chat_request: ChatRequest) -> Workflow:
-    workflow = CodeArtifactWorkflow(
-        llm=OpenAI(model="gpt-4.1"),
-        chat_request=chat_request,
-        timeout=120.0,
-    )
-    return workflow

packages/create-llama/templates/types/llamaindexserver/fastapi/pyproject.toml

@@ -12,7 +12,7 @@ dependencies = [
     "pydantic<2.10",
     "aiostream>=0.5.2,<0.6.0",
     "llama-index-core>=0.12.28,<0.13.0",
-    "llama-index-server>=0.1.15,<0.2.0",
+    "llama-index-server>=0.1.14,<0.2.0",
 ]
 
 [project.optional-dependencies]

packages/server/.gitignore

@@ -1 +0,0 @@
-server/

packages/server/.prettierignore

@@ -1,7 +0,0 @@
-lib/
-dist/
-server/
-next/.next/
-next/out/
-node_modules/
-build/

packages/server/CHANGELOG.md

@@ -1,121 +0,0 @@
-# @llamaindex/server
-
-## 0.1.7
-
-### Patch Changes
-
-- 8fe5fc2: chore: add llamaindex server package
-
-## 0.1.6
-
-### Patch Changes
-
-- 82d4b46: feat: re-add supports for artifacts
-
-## 0.1.5
-
-### Patch Changes
-
-- 7ca9ddf: Add generate ui workflow to @llamaindex/server
-- 3310eaa: chore: bump chat-ui
-  - llamaindex@0.10.2
-
-## 0.1.4
-
-### Patch Changes
-
-- llamaindex@0.10.1
-
-## 0.1.3
-
-### Patch Changes
-
-- edb8b87: fix: shadcn components cannot be used in next server
-- Updated dependencies [6cf928f]
-  - llamaindex@0.10.0
-
-## 0.1.2
-
-### Patch Changes
-
-- bb34ade: feat: support cn utils for server UI
-  - llamaindex@0.9.19
-
-## 0.1.1
-
-### Patch Changes
-
-- 400b3b5: feat: use full-source code with import statements for custom comps
-  - llamaindex@0.9.18
-
-## 0.1.0
-
-### Minor Changes
-
-- 3ffee26: feat: enhance config params for LlamaIndexServer
-
-## 0.0.9
-
-### Patch Changes
-
-- 0b75bd6: feat: component dir in llamaindex server
-
-## 0.0.8
-
-### Patch Changes
-
-- Updated dependencies [3534c37]
-  - llamaindex@0.9.17
-
-## 0.0.7
-
-### Patch Changes
-
-- 4999df1: bump nextjs
-- Updated dependencies [f5e4d09]
-  - llamaindex@0.9.16
-
-## 0.0.6
-
-### Patch Changes
-
-- 8c02684: fix: handle stream error
-- c515a32: feat: return raw output for agent toolcall result
-  - llamaindex@0.9.15
-
-## 0.0.5
-
-### Patch Changes
-
-- 9d951b2: feat: support llamacloud in @llamaindex/server
-- Updated dependencies [9d951b2]
-  - llamaindex@0.9.14
-
-## 0.0.4
-
-### Patch Changes
-
-- 164cf7a: fix: custom next server start fail
-
-## 0.0.3
-
-### Patch Changes
-
-- 299008b: feat: copy create-llama to @llamaindex/servers
-- 75d6e29: feat: response source nodes in query tool output
-- Updated dependencies [75d6e29]
-  - llamaindex@0.9.13
-
-## 0.0.2
-
-### Patch Changes
-
-- f8a86e4: feat: @llamaindex/server
-- Updated dependencies [21bebfc]
-- Updated dependencies [93bc0ff]
-- Updated dependencies [91a18e7]
-- Updated dependencies [f8a86e4]
-- Updated dependencies [5189b44]
-- Updated dependencies [58a9446]
-  - @llamaindex/core@0.6.0
-  - @llamaindex/workflow@1.0.0

packages/server/README.md

@@ -1,161 +0,0 @@
-# LlamaIndex Server
-
-LlamaIndexServer is a Next.js-based application that allows you to quickly launch your [LlamaIndex Workflows](https://ts.llamaindex.ai/docs/llamaindex/modules/agents/workflows) and [Agent Workflows](https://ts.llamaindex.ai/docs/llamaindex/modules/agents/agent_workflow) as an API server with an optional chat UI. It provides a complete environment for running LlamaIndex workflows with both API endpoints and a user interface for interaction.
-
-## Features
-
-- Serving a workflow as a chatbot
-- Built on Next.js for high performance and easy API development
-- Optional built-in chat UI with extendable UI components
-- Prebuilt development code
-
-## Installation
-
-```bash
-npm i @llamaindex/server
-```
-
-## Quick Start
-
-Create an `index.ts` file and add the following code:
-
-```ts
-import { LlamaIndexServer } from "@llamaindex/server";
-import { wiki } from "@llamaindex/tools"; // or any other tool
-
-const createWorkflow = () => agent({ tools: [wiki()] });
-
-new LlamaIndexServer({
-  workflow: createWorkflow,
-  uiConfig: {
-    appTitle: "LlamaIndex App",
-    starterQuestions: ["Who is the first president of the United States?"],
-  },
-}).start();
-```
-
-## Running the Server
-
-In the same directory as `index.ts`, run the following command to start the server:
-
-```bash
-tsx index.ts
-```
-
-The server will start at `http://localhost:3000`
-
-You can also make a request to the server:
-
-```bash
-curl -X POST "http://localhost:3000/api/chat" -H "Content-Type: application/json" -d '{"message": "Who is the first president of the United States?"}'
-```
-
-## Configuration Options
-
-The `LlamaIndexServer` accepts the following configuration options:
-
-- `workflow`: A callable function that creates a workflow instance for each request
-- `uiConfig`: An object to configure the chat UI containing the following properties:
-  - `appTitle`: The title of the application (default: `"LlamaIndex App"`)
-  - `starterQuestions`: List of starter questions for the chat UI (default: `[]`)
-  - `componentsDir`: The directory for custom UI components rendering events emitted by the workflow. The default is undefined, which does not render custom UI components.
-  - `llamaCloudIndexSelector`: Whether to show the LlamaCloud index selector in the chat UI (requires `LLAMA_CLOUD_API_KEY` to be set in the environment variables) (default: `false`)
-
-LlamaIndexServer accepts all the configuration options from Nextjs Custom Server such as `port`, `hostname`, `dev`, etc.
-See all Nextjs Custom Server options [here](https://nextjs.org/docs/app/building-your-application/configuring/custom-server).
-
-## AI-generated UI Components
-
-The LlamaIndex server provides support for rendering workflow events using custom UI components, allowing you to extend and customize the chat interface.
-These components can be auto-generated using an LLM by providing a JSON schema of the workflow event.
-
-### UI Event Schema
-
-To display custom UI components, your workflow needs to emit UI events that have an event type for identification and a data object:
-
-```typescript
-class UIEvent extends WorkflowEvent<{
-  type: "ui_event";
-  data: UIEventData;
-}> {}
-```
-
-The `data` object can be any JSON object. To enable AI generation of the UI component, you need to provide a schema for that data (here we're using Zod):
-
-```typescript
-const MyEventDataSchema = z
-  .object({
-    stage: z
-      .enum(["retrieve", "analyze", "answer"])
-      .describe("The current stage the workflow process is in."),
-    progress: z
-      .number()
-      .min(0)
-      .max(1)
-      .describe("The progress in percent of the current stage"),
-  })
-  .describe("WorkflowStageProgress");
-
-type UIEventData = z.infer<typeof MyEventDataSchema>;
-```
-
-### Generate UI Components
-
-The `generateEventComponent` function uses an LLM to generate a custom UI component based on the JSON schema of a workflow event. The schema should contain accurate descriptions of each field so that the LLM can generate matching components for your use case. We've done this for you in the example above using the `describe` function from Zod:
-
-```typescript
-import { OpenAI } from "llamaindex";
-import { generateEventComponent } from "@llamaindex/server";
-import { MyEventDataSchema } from "./your-workflow";
-
-// Also works well with Claude 3.5 Sonnet and Google Gemini 2.5 Pro
-const llm = new OpenAI({ model: "gpt-4.1" });
-const code = generateEventComponent(MyEventDataSchema, llm);
-```
-
-After generating the code, we need to save it to a file. The file name must match the event type from your workflow (e.g., `ui_event.jsx` for handling events with `ui_event` type):
-
-```ts
-fs.writeFileSync("components/ui_event.jsx", code);
-```
-
-Feel free to modify the generated code to match your needs. If you're not satisfied with the generated code, we suggest improving the provided JSON schema first or trying another LLM.
-
-> Note that `generateEventComponent` is generating JSX code, but you can also provide a TSX file.
-
-### Server Setup
-
-To use the generated UI components, you need to initialize the LlamaIndex server with the `componentsDir` that contains your custom UI components:
-
-```ts
-new LlamaIndexServer({
-  workflow: createWorkflow,
-  uiConfig: {
-    appTitle: "LlamaIndex App",
-    componentsDir: "components",
-  },
-}).start();
-```
-
-## Default Endpoints and Features
-
-### Chat Endpoint
-
-The server includes a default chat endpoint at `/api/chat` for handling chat interactions.
-
-### Chat UI
-
-The server always provides a chat interface at the root path (`/`) with:
-
-- Configurable starter questions
-- Real-time chat interface
-- API endpoint integration
-
-### Static File Serving
-
-- The server automatically mounts the `data` and `output` folders at `{server_url}{api_prefix}/files/data` (default: `/api/files/data`) and `{server_url}{api_prefix}/files/output` (default: `/api/files/output`) respectively.
-- Your workflows can use both folders to store and access files. By convention, the `data` folder is used for documents that are ingested, and the `output` folder is used for documents generated by the workflow.
-
-## API Reference
-
-- [LlamaIndexServer](https://ts.llamaindex.ai/docs/api/classes/LlamaIndexServer)

packages/server/eslint.config.mjs

@@ -1,42 +0,0 @@
-import eslint from "@eslint/js";
-import eslintConfigPrettier from "eslint-config-prettier";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config(
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-  eslintConfigPrettier,
-  {
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: "module",
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
-    },
-  },
-  {
-    rules: {
-      "no-irregular-whitespace": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-      "@typescript-eslint/no-explicit-any": [
-        "error",
-        {
-          ignoreRestArgs: true,
-        },
-      ],
-    },
-  },
-  {
-    ignores: [
-      "**/dist/**",
-      "**/lib/*",
-      "**/.next/**",
-      "**/out/**",
-      "**/node_modules/**",
-      "**/build/**",
-    ],
-  },
-);

packages/server/next/.gitignore

@@ -1,39 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-output/
-
-!lib/

packages/server/next/app/components/ui/accordion.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-import { cn } from "./lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-    {...props}
-  >
-    <div className={cn("pt-0 pb-4", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

packages/server/next/app/components/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client";
-
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as React from "react";
-
-import { buttonVariants } from "./button";
-import { cn } from "./lib/utils";
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  );
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

packages/server/next/app/components/ui/alert.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertDescription, AlertTitle };

packages/server/next/app/components/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
-}
-
-export { AspectRatio };

packages/server/next/app/components/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarFallback, AvatarImage };

packages/server/next/app/components/ui/badge.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

packages/server/next/app/components/ui/breadcrumb.tsx

@@ -1,111 +0,0 @@
-"use client";
-
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("text-foreground font-normal", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
-  );
-}
-
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  );
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-};

packages/server/next/app/components/ui/button.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

packages/server/next/app/components/ui/calendar.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import * as React from "react";
-import { DayPicker } from "react-day-picker";
-
-import { buttonVariants } from "./button";
-import { cn } from "./lib/utils";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: React.ComponentProps<typeof DayPicker>) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100",
-        ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("size-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
-        ),
-      }}
-      {...props}
-    />
-  );
-}
-
-export { Calendar };

packages/server/next/app/components/ui/card.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { forwardRef } from "react";
-import { cn } from "./lib/utils";
-
-const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Card.displayName = "Card";
-
-const CardHeader = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("leading-none font-semibold tracking-tight", className)}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
-    {...props}
-  />
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-const CardFooter = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";
-
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-};

packages/server/next/app/components/ui/carousel.tsx

@@ -1,241 +0,0 @@
-"use client";
-
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "./button";
-import { cn } from "./lib/utils";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return;
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext],
-  );
-
-  React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-
-  React.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-}
-
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel();
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel();
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-}
-
-export {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  type CarouselApi,
-};

packages/server/next/app/components/ui/chart.tsx

@@ -1,353 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "./lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig;
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"];
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color,
-  );
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string;
-    labelKey?: string;
-  }) {
-  const { config } = useChart();
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null;
-    }
-
-    const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label;
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      );
-    }
-
-    if (!value) {
-      return null;
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ]);
-
-  if (!active || !payload?.length) {
-    return null;
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot";
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className,
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color;
-
-          return (
-            <div
-              key={item.dataKey}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                indicator === "dot" && "items-center",
-              )}
-            >
-              {formatter && item?.value !== undefined && item.name ? (
-                formatter(item.value, item.name, item, index, item.payload)
-              ) : (
-                <>
-                  {itemConfig?.icon ? (
-                    <itemConfig.icon />
-                  ) : (
-                    !hideIndicator && (
-                      <div
-                        className={cn(
-                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                          {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "w-1": indicator === "line",
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
-                              indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          },
-                        )}
-                        style={
-                          {
-                            "--color-bg": indicatorColor,
-                            "--color-border": indicatorColor,
-                          } as React.CSSProperties
-                        }
-                      />
-                    )
-                  )}
-                  <div
-                    className={cn(
-                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center",
-                    )}
-                  >
-                    <div className="grid gap-1.5">
-                      {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label || item.name}
-                      </span>
-                    </div>
-                    {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
-                        {item.value.toLocaleString()}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-  }) {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
-      )}
-    >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
-            )}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string,
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-  ChartTooltip,
-  ChartTooltipContent,
-};

packages/server/next/app/components/ui/chat/canvas/panel.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { ChatCanvas, useChatCanvas } from "@llamaindex/chat-ui";
-import { ResizableHandle, ResizablePanel } from "../../resizable";
-import { CodeArtifactRenderer } from "./preview";
-
-export function ChatCanvasPanel() {
-  const { displayedArtifact, isCanvasOpen } = useChatCanvas();
-  if (!displayedArtifact || !isCanvasOpen) return null;
-
-  return (
-    <>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={60} minSize={50}>
-        <ChatCanvas className="w-full">
-          <ChatCanvas.CodeArtifact
-            tabs={{ preview: <CodeArtifactRenderer /> }}
-          />
-          <ChatCanvas.DocumentArtifact />
-        </ChatCanvas>
-      </ResizablePanel>
-    </>
-  );
-}

packages/server/next/app/components/ui/chat/canvas/preview.tsx

@@ -1,155 +0,0 @@
-"use client";
-
-import { CodeArtifact, useChatCanvas } from "@llamaindex/chat-ui";
-import { Loader2, WandSparkles } from "lucide-react";
-import React, { FunctionComponent, useEffect, useState } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../accordion";
-import { buttonVariants } from "../../button";
-import { cn } from "../../lib/utils";
-import { DynamicComponentErrorBoundary } from "../custom/events/error-boundary";
-import { parseComponent } from "../custom/events/loader";
-
-const SUPPORTED_FRONTEND_PREVIEW = [
-  "js",
-  "ts",
-  "jsx",
-  "tsx",
-  "javascript",
-  "typescript",
-];
-
-export function CodeArtifactRenderer() {
-  const { displayedArtifact } = useChatCanvas();
-
-  if (displayedArtifact?.type !== "code") return null;
-  const codeArtifact = displayedArtifact as CodeArtifact;
-
-  if (!SUPPORTED_FRONTEND_PREVIEW.includes(codeArtifact.data.language)) {
-    return (
-      <div className="flex h-full items-center justify-center gap-2">
-        <p className="text-sm text-gray-500">
-          Preview is not supported for this language
-        </p>
-      </div>
-    );
-  }
-
-  return <CodeArtifactRendererComp artifact={codeArtifact} />;
-}
-
-function CodeArtifactRendererComp({ artifact }: { artifact: CodeArtifact }) {
-  const { appendErrors } = useChatCanvas();
-  const [isRendering, setIsRendering] = useState(true);
-  const [component, setComponent] = useState<FunctionComponent | null>(null);
-
-  const {
-    data: { code, file_name },
-  } = artifact;
-
-  useEffect(() => {
-    const renderComponent = async () => {
-      setIsRendering(true);
-      const { component: parsedComponent, error } = await parseComponent(
-        code,
-        file_name,
-      );
-
-      if (error) {
-        setComponent(null);
-        appendErrors(artifact, [error]);
-      } else {
-        setComponent(() => parsedComponent);
-      }
-
-      setIsRendering(false);
-    };
-
-    renderComponent();
-  }, [artifact]);
-
-  if (isRendering) {
-    return (
-      <div className="flex h-full items-center justify-center gap-2">
-        <Loader2 className="size-4 animate-spin" />
-        <p className="text-sm text-gray-500">Rendering Artifact...</p>
-      </div>
-    );
-  }
-
-  if (!component) {
-    return <CodeErrors artifact={artifact} />;
-  }
-
-  return (
-    <DynamicComponentErrorBoundary
-      onError={(error) => appendErrors(artifact, [error])}
-    >
-      {React.createElement(component)}
-    </DynamicComponentErrorBoundary>
-  );
-}
-
-function CodeErrors({ artifact }: { artifact: CodeArtifact }) {
-  const { getCodeErrors, fixCodeErrors } = useChatCanvas();
-  const uniqueErrors = getCodeErrors(artifact);
-
-  if (uniqueErrors.length === 0) return null;
-
-  return (
-    <div className="flex flex-col gap-10 px-10 pt-10">
-      <p className="text-center text-sm text-gray-500">
-        Error when rendering code, please check the details and try fixing them.
-      </p>
-      <Accordion
-        type="single"
-        defaultValue="errors"
-        collapsible
-        className="w-full rounded-xl border border-gray-100 bg-white shadow-md"
-      >
-        <AccordionItem value="errors" className="border-none px-4">
-          <AccordionTrigger className="py-2 hover:no-underline">
-            <div className="flex flex-1 items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground font-bold">
-                  Rendering errors
-                </span>
-                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-yellow-500 text-xs text-white">
-                  {uniqueErrors.length}
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div
-                  className={cn(
-                    buttonVariants({ variant: "default", size: "sm" }),
-                    "mr-2 h-8 cursor-pointer bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600",
-                  )}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    fixCodeErrors(artifact);
-                  }}
-                >
-                  <WandSparkles className="mr-2 h-4 w-4" />
-                  <span>Fix errors</span>
-                </div>
-              </div>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className="pb-4">
-            <div className="space-y-2">
-              {uniqueErrors.map((error, index) => (
-                <p key={index} className="text-muted-foreground text-sm">
-                  {error}
-                </p>
-              ))}
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}

packages/server/next/app/components/ui/chat/chat-avatar.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { ChatMessage } from "@llamaindex/chat-ui";
-
-export function ChatMessageAvatar() {
-  return (
-    <ChatMessage.Avatar>
-      <img
-        className="rounded-full border-1 border-[#e711dd]"
-        src="/llama.png"
-        alt="Llama Logo"
-      />
-    </ChatMessage.Avatar>
-  );
-}

packages/server/next/app/components/ui/chat/chat-header.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { Sparkles, Star } from "lucide-react";
-import { Button } from "../button";
-import { getConfig } from "../lib/utils";
-
-export function ChatHeader() {
-  return (
-    <div className="flex items-center justify-between px-4 pt-2">
-      <ChatAppTitle />
-      <LlamaIndexLinks />
-    </div>
-  );
-}
-
-function ChatAppTitle() {
-  return (
-    <div className="flex items-center gap-2">
-      <Sparkles className="size-4" />
-      <h1 className="font-semibold">{getConfig("APP_TITLE")}</h1>
-    </div>
-  );
-}
-
-function LlamaIndexLinks() {
-  return (
-    <div className="flex items-center justify-end gap-4">
-      <div className="flex items-center gap-2">
-        <a
-          href="https://www.llamaindex.ai/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
-        >
-          Built by LlamaIndex
-        </a>
-        <img
-          className="h-[24px] w-[24px] rounded-sm"
-          src="/llama.png"
-          alt="Llama Logo"
-        />
-      </div>
-      <a
-        href="https://github.com/run-llama/LlamaIndexTS"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Button variant="outline" size="sm">
-          <Star className="mr-2 size-4" />
-          Star on GitHub
-        </Button>
-      </a>
-    </div>
-  );
-}

packages/server/next/app/components/ui/chat/chat-injection.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-/**
- * The default border color has changed to `currentColor` in Tailwind CSS v4,
- * so adding these compatibility styles to make sure everything still
- * looks the same as it did with Tailwind CSS v3.
- */
-const tailwindConfig = `
-@import "tailwindcss";
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-`;
-
-export function ChatInjection() {
-  return (
-    <>
-      <script
-        async
-        src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"
-      ></script>
-      <style type="text/tailwindcss">{tailwindConfig}</style>
-    </>
-  );
-}

packages/server/next/app/components/ui/chat/chat-input.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { ChatInput, useChatUI, useFile } from "@llamaindex/chat-ui";
-import { DocumentInfo, ImagePreview } from "@llamaindex/chat-ui/widgets";
-import { getConfig } from "../lib/utils";
-import { LlamaCloudSelector } from "./custom/llama-cloud-selector";
-
-export default function CustomChatInput() {
-  const { requestData, isLoading, input } = useChatUI();
-  const uploadAPI = getConfig("UPLOAD_API") ?? "";
-  const llamaCloudAPI = getConfig("LLAMA_CLOUD_API") ?? "";
-  const {
-    imageUrl,
-    setImageUrl,
-    uploadFile,
-    files,
-    removeDoc,
-    reset,
-    getAnnotations,
-  } = useFile({ uploadAPI });
-
-  /**
-   * Handles file uploads. Overwrite to hook into the file upload behavior.
-   * @param file The file to upload
-   */
-  const handleUploadFile = async (file: File) => {
-    // There's already an image uploaded, only allow one image at a time
-    if (imageUrl) {
-      alert("You can only upload one image at a time.");
-      return;
-    }
-
-    try {
-      // Upload the file and send with it the current request data
-      await uploadFile(file, requestData);
-    } catch (error: unknown) {
-      // Show error message if upload fails
-      alert(
-        error instanceof Error ? error.message : "An unknown error occurred",
-      );
-    }
-  };
-
-  // Get references to the upload files in message annotations format, see https://github.com/run-llama/chat-ui/blob/main/packages/chat-ui/src/hook/use-file.tsx#L56
-  const annotations = getAnnotations();
-
-  return (
-    <ChatInput resetUploadedFiles={reset} annotations={annotations}>
-      {/* Image preview section */}
-      {imageUrl && (
-        <ImagePreview url={imageUrl} onRemove={() => setImageUrl(null)} />
-      )}
-      {/* Document previews section */}
-      {files.length > 0 && (
-        <div className="flex w-full gap-4 overflow-auto py-2">
-          {files.map((file) => (
-            <DocumentInfo
-              key={file.id}
-              document={{ url: file.url, sources: [] }}
-              className="mt-2 mb-2"
-              onRemove={() => removeDoc(file)}
-            />
-          ))}
-        </div>
-      )}
-      <ChatInput.Form>
-        <ChatInput.Field />
-        {uploadAPI && <ChatInput.Upload onUpload={handleUploadFile} />}
-        {llamaCloudAPI && <LlamaCloudSelector />}
-        <ChatInput.Submit
-          disabled={
-            isLoading || (!input.trim() && files.length === 0 && !imageUrl)
-          }
-        />
-      </ChatInput.Form>
-    </ChatInput>
-  );
-}

packages/server/next/app/components/ui/chat/chat-message-content.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { ChatMessage } from "@llamaindex/chat-ui";
-import { DynamicEvents } from "./custom/events/dynamic-events";
-import { ComponentDef } from "./custom/events/types";
-import { ToolAnnotations } from "./tools/chat-tools";
-
-export function ChatMessageContent({
-  componentDefs,
-  appendError,
-}: {
-  componentDefs: ComponentDef[];
-  appendError: (error: string) => void;
-}) {
-  return (
-    <ChatMessage.Content>
-      <ChatMessage.Content.Event />
-      <ChatMessage.Content.AgentEvent />
-      <ToolAnnotations />
-      <ChatMessage.Content.Image />
-      <DynamicEvents componentDefs={componentDefs} appendError={appendError} />
-      <ChatMessage.Content.Artifact />
-      <ChatMessage.Content.Markdown />
-      <ChatMessage.Content.DocumentFile />
-      <ChatMessage.Content.Source />
-      <ChatMessage.Content.SuggestedQuestions />
-    </ChatMessage.Content>
-  );
-}

packages/server/next/app/components/ui/chat/chat-messages.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { ChatMessage, ChatMessages, useChatUI } from "@llamaindex/chat-ui";
-import { ChatMessageAvatar } from "./chat-avatar";
-import { ChatMessageContent } from "./chat-message-content";
-import { ChatStarter } from "./chat-starter";
-import { ComponentDef } from "./custom/events/types";
-
-export default function CustomChatMessages({
-  componentDefs,
-  appendError,
-}: {
-  componentDefs: ComponentDef[];
-  appendError: (error: string) => void;
-}) {
-  const { messages } = useChatUI();
-
-  return (
-    <ChatMessages>
-      <ChatMessages.List>
-        {messages.map((message, index) => (
-          <ChatMessage
-            key={index}
-            message={message}
-            isLast={index === messages.length - 1}
-          >
-            <ChatMessageAvatar />
-            <ChatMessageContent
-              componentDefs={componentDefs}
-              appendError={appendError}
-            />
-            <ChatMessage.Actions />
-          </ChatMessage>
-        ))}
-        <ChatMessages.Empty />
-        <ChatMessages.Loading />
-      </ChatMessages.List>
-      <ChatStarter />
-    </ChatMessages>
-  );
-}

packages/server/next/app/components/ui/chat/chat-section.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { ChatSection as ChatUI } from "@llamaindex/chat-ui";
-import { useChat } from "ai/react";
-import { useEffect, useMemo, useState } from "react";
-import { getConfig } from "../lib/utils";
-import { ResizablePanel, ResizablePanelGroup } from "../resizable";
-import { ChatCanvasPanel } from "./canvas/panel";
-import { ChatHeader } from "./chat-header";
-import { ChatInjection } from "./chat-injection";
-import CustomChatInput from "./chat-input";
-import CustomChatMessages from "./chat-messages";
-import { DynamicEventsErrors } from "./custom/events/dynamic-events-errors";
-import { fetchComponentDefinitions } from "./custom/events/loader";
-import { ComponentDef } from "./custom/events/types";
-
-export default function ChatSection() {
-  const handler = useChat({
-    api: getConfig("CHAT_API"),
-    onError: (error: unknown) => {
-      if (!(error instanceof Error)) throw error;
-      let errorMessage: string;
-      try {
-        errorMessage = JSON.parse(error.message).detail;
-      } catch (e) {
-        errorMessage = error.message;
-      }
-      alert(errorMessage);
-    },
-    experimental_throttle: 100,
-  });
-  return (
-    <>
-      <div className="flex h-screen w-screen flex-col overflow-hidden">
-        <ChatHeader />
-        <ChatUI
-          handler={handler}
-          className="flex min-h-0 flex-1 flex-row justify-center gap-4 px-4 py-0"
-        >
-          <ResizablePanelGroup direction="horizontal">
-            <ChatSectionPanel />
-            <ChatCanvasPanel />
-          </ResizablePanelGroup>
-        </ChatUI>
-      </div>
-      <ChatInjection />
-    </>
-  );
-}
-
-function ChatSectionPanel() {
-  const [componentDefs, setComponentDefs] = useState<ComponentDef[]>([]);
-  const [dynamicEventsErrors, setDynamicEventsErrors] = useState<string[]>([]); // contain all errors when rendering dynamic events from componentDir
-
-  const appendError = (error: string) => {
-    setDynamicEventsErrors((prev) => [...prev, error]);
-  };
-
-  const uniqueErrors = useMemo(() => {
-    return Array.from(new Set(dynamicEventsErrors));
-  }, [dynamicEventsErrors]);
-
-  // fetch component definitions and use Babel to tranform JSX code to JS code
-  // this is triggered only once when the page is initialised
-  useEffect(() => {
-    fetchComponentDefinitions().then(({ components, errors }) => {
-      setComponentDefs(components);
-      if (errors.length > 0) {
-        setDynamicEventsErrors((prev) => [...prev, ...errors]);
-      }
-    });
-  }, []);
-
-  return (
-    <ResizablePanel defaultSize={40} minSize={30} className="mx-auto max-w-1/2">
-      <div className="flex h-full min-w-0 flex-1 flex-col gap-4">
-        <DynamicEventsErrors
-          errors={uniqueErrors}
-          clearErrors={() => setDynamicEventsErrors([])}
-        />
-        <CustomChatMessages
-          componentDefs={componentDefs}
-          appendError={appendError}
-        />
-        <CustomChatInput />
-      </div>
-    </ResizablePanel>
-  );
-}

packages/server/next/app/components/ui/chat/chat-starter.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { useChatUI } from "@llamaindex/chat-ui";
-import { StarterQuestions } from "@llamaindex/chat-ui/widgets";
-import { getConfig } from "../lib/utils";
-
-export function ChatStarter({ className }: { className?: string }) {
-  const { append, messages, requestData } = useChatUI();
-  const starterQuestions = getConfig("STARTER_QUESTIONS") ?? [];
-
-  if (starterQuestions.length === 0 || messages.length > 0) return null;
-  return (
-    <StarterQuestions
-      append={(message) => append(message, { data: requestData })}
-      questions={starterQuestions}
-      className={className}
-    />
-  );
-}

packages/server/next/app/components/ui/chat/custom/events/dynamic-events-errors.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import "@llamaindex/chat-ui/styles/markdown.css";
-import "@llamaindex/chat-ui/styles/pdf.css";
-import { XIcon } from "lucide-react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../../accordion";
-import { buttonVariants } from "../../../button";
-import { cn } from "../../../lib/utils";
-
-export function DynamicEventsErrors({
-  errors,
-  clearErrors,
-}: {
-  errors: string[];
-  clearErrors: () => void;
-}) {
-  if (errors.length === 0) return null;
-  return (
-    <Accordion
-      type="single"
-      defaultValue="errors"
-      collapsible
-      className="rounded-xl border border-gray-100 bg-white shadow-md"
-    >
-      <AccordionItem value="errors" className="border-none px-4">
-        <AccordionTrigger className="py-2 hover:no-underline">
-          <div className="flex flex-1 items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="text-muted-foreground font-bold">
-                Errors when rendering dynamic events from components directory
-              </span>
-              <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-yellow-500 text-xs text-white">
-                {errors.length}
-              </span>
-            </div>
-            <div
-              className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}
-              onClick={(e) => {
-                e.stopPropagation();
-                clearErrors();
-              }}
-            >
-              <XIcon className="mr-2 h-4 w-4" />
-              <span>Clear all</span>
-            </div>
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className="pb-4">
-          <div className="space-y-2">
-            {errors.map((error, index) => (
-              <p key={index} className="text-muted-foreground text-sm">
-                {error}
-              </p>
-            ))}
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}

packages/server/next/app/components/ui/chat/custom/events/dynamic-events.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import {
-  getChatUIAnnotation,
-  JSONValue,
-  MessageAnnotation,
-  MessageAnnotationType,
-  useChatMessage,
-} from "@llamaindex/chat-ui";
-import React, { useEffect, useRef, useState } from "react";
-import { DynamicComponentErrorBoundary } from "./error-boundary";
-import { ComponentDef } from "./types";
-
-type EventComponent = ComponentDef & {
-  events: JSONValue[];
-};
-
-// image, document_file, sources, events, suggested_questions, agent
-const BUILT_IN_CHATUI_COMPONENTS = Object.values(MessageAnnotationType);
-
-export const DynamicEvents = ({
-  componentDefs,
-  appendError,
-}: {
-  componentDefs: ComponentDef[];
-  appendError: (error: string) => void;
-}) => {
-  const {
-    message: { annotations },
-  } = useChatMessage();
-
-  const shownWarningsRef = useRef<Set<string>>(new Set()); // track warnings
-  const [hasErrors, setHasErrors] = useState(false);
-
-  const handleError = (error: string) => {
-    setHasErrors(true);
-    appendError(error);
-  };
-
-  // Check for missing components in annotations
-  useEffect(() => {
-    if (!annotations?.length) return;
-
-    const availableComponents = new Set(componentDefs.map((comp) => comp.type));
-
-    annotations.forEach((annotation: MessageAnnotation) => {
-      const type = annotation.type;
-      if (!type) return; // skip if annotation doesn't have a type
-
-      const events = getChatUIAnnotation(annotations, type);
-
-      // Skip if it's a built-in component or if we've already shown the warning
-      if (
-        BUILT_IN_CHATUI_COMPONENTS.includes(type) ||
-        shownWarningsRef.current.has(type)
-      ) {
-        return;
-      }
-
-      // If we have events for a type but no component definition, show a warning
-      if (events && !availableComponents.has(type)) {
-        console.warn(
-          `No component found for event type: ${type} or having error when rendering it. Ensure there is a component file named ${type}.tsx or ${type}.jsx in your components directory, and verify the code for any errors.`,
-        );
-        shownWarningsRef.current.add(type);
-      }
-    });
-  }, [annotations, componentDefs]);
-
-  const components: EventComponent[] = componentDefs
-    .map((comp) => {
-      const events = getChatUIAnnotation(annotations, comp.type) as JSONValue[]; // get all event data by type
-      if (!events?.length) return null;
-      return { ...comp, events };
-    })
-    .filter((comp) => comp !== null);
-
-  if (components.length === 0) return null;
-  if (hasErrors) return null;
-
-  return (
-    <div className="components-container">
-      {components.map((component, index) => {
-        return (
-          <React.Fragment key={`${component.type}-${index}`}>
-            {renderEventComponent(component, handleError)}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-};
-
-function renderEventComponent(
-  component: EventComponent,
-  appendError: (error: string) => void,
-) {
-  return (
-    <DynamicComponentErrorBoundary
-      onError={appendError}
-      eventType={component.type}
-    >
-      {React.createElement(component.comp, { events: component.events })}
-    </DynamicComponentErrorBoundary>
-  );
-}

packages/server/next/app/components/ui/chat/custom/events/error-boundary.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import React from "react";
-
-interface Props {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-  onError?: (errMsg: string) => void;
-  eventType?: string;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class DynamicComponentErrorBoundary extends React.Component<
-  Props,
-  State
-> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.warn(this.props.eventType, error, errorInfo);
-    const errorMessage = `Fail to render ${this.props.eventType} component: ${error.message}`;
-    this.props.onError?.(errorMessage);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback || null;
-    }
-    return this.props.children;
-  }
-}

packages/server/next/app/components/ui/chat/custom/events/import.ts

@@ -1,149 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-"use client";
-
-import { parse } from "@babel/parser";
-import traverse from "@babel/traverse";
-import React from "react";
-
-export const SHADCN_IMPORT_PREFIX = "@/components/ui"; // all 46 Shadcn components
-
-// Maps import paths in component code to Shadcn components and ChatUI widgets
-export const SOURCE_MAP: Record<string, () => Promise<any>> = {
-  ///// REACT /////
-  [`react`]: () => import("react"),
-  [`react-dom`]: () => import("react-dom"),
-
-  ///// SHADCN COMPONENTS /////
-  [`${SHADCN_IMPORT_PREFIX}/accordion`]: () => import("../../../accordion"),
-  [`${SHADCN_IMPORT_PREFIX}/alert`]: () => import("../../../alert"),
-  [`${SHADCN_IMPORT_PREFIX}/alert-dialog`]: () =>
-    import("../../../alert-dialog"),
-  [`${SHADCN_IMPORT_PREFIX}/aspect-ratio`]: () =>
-    import("../../../aspect-ratio"),
-  [`${SHADCN_IMPORT_PREFIX}/avatar`]: () => import("../../../avatar"),
-  [`${SHADCN_IMPORT_PREFIX}/badge`]: () => import("../../../badge"),
-  [`${SHADCN_IMPORT_PREFIX}/breadcrumb`]: () => import("../../../breadcrumb"),
-  [`${SHADCN_IMPORT_PREFIX}/button`]: () => import("../../../button"),
-  [`${SHADCN_IMPORT_PREFIX}/calendar`]: () => import("../../../calendar"),
-  [`${SHADCN_IMPORT_PREFIX}/card`]: () => import("../../../card"),
-  [`${SHADCN_IMPORT_PREFIX}/carousel`]: () => import("../../../carousel"),
-  [`${SHADCN_IMPORT_PREFIX}/chart`]: () => import("../../../chart"),
-  [`${SHADCN_IMPORT_PREFIX}/checkbox`]: () => import("../../../checkbox"),
-  [`${SHADCN_IMPORT_PREFIX}/collapsible`]: () => import("../../../collapsible"),
-  [`${SHADCN_IMPORT_PREFIX}/command`]: () => import("../../../command"),
-  [`${SHADCN_IMPORT_PREFIX}/context-menu`]: () =>
-    import("../../../context-menu"),
-  [`${SHADCN_IMPORT_PREFIX}/dialog`]: () => import("../../../dialog"),
-  [`${SHADCN_IMPORT_PREFIX}/drawer`]: () => import("../../../drawer"),
-  [`${SHADCN_IMPORT_PREFIX}/dropdown-menu`]: () =>
-    import("../../../dropdown-menu"),
-  [`${SHADCN_IMPORT_PREFIX}/form`]: () => import("../../../form"),
-  [`${SHADCN_IMPORT_PREFIX}/hover-card`]: () => import("../../../hover-card"),
-  [`${SHADCN_IMPORT_PREFIX}/input`]: () => import("../../../input"),
-  [`${SHADCN_IMPORT_PREFIX}/input-otp`]: () => import("../../../input-otp"),
-  [`${SHADCN_IMPORT_PREFIX}/label`]: () => import("../../../label"),
-  [`${SHADCN_IMPORT_PREFIX}/menubar`]: () => import("../../../menubar"),
-  [`${SHADCN_IMPORT_PREFIX}/navigation-menu`]: () =>
-    import("../../../navigation-menu"),
-  [`${SHADCN_IMPORT_PREFIX}/pagination`]: () => import("../../../pagination"),
-  [`${SHADCN_IMPORT_PREFIX}/popover`]: () => import("../../../popover"),
-  [`${SHADCN_IMPORT_PREFIX}/progress`]: () => import("../../../progress"),
-  [`${SHADCN_IMPORT_PREFIX}/radio-group`]: () => import("../../../radio-group"),
-  [`${SHADCN_IMPORT_PREFIX}/resizable`]: () => import("../../../resizable"),
-  [`${SHADCN_IMPORT_PREFIX}/scroll-area`]: () => import("../../../scroll-area"),
-  [`${SHADCN_IMPORT_PREFIX}/select`]: () => import("../../../select"),
-  [`${SHADCN_IMPORT_PREFIX}/separator`]: () => import("../../../separator"),
-  [`${SHADCN_IMPORT_PREFIX}/sheet`]: () => import("../../../sheet"),
-  [`${SHADCN_IMPORT_PREFIX}/sidebar`]: () => import("../../../sidebar"),
-  [`${SHADCN_IMPORT_PREFIX}/skeleton`]: () => import("../../../skeleton"),
-  [`${SHADCN_IMPORT_PREFIX}/slider`]: () => import("../../../slider"),
-  [`${SHADCN_IMPORT_PREFIX}/sonner`]: () => import("../../../sonner"),
-  [`${SHADCN_IMPORT_PREFIX}/switch`]: () => import("../../../switch"),
-  [`${SHADCN_IMPORT_PREFIX}/table`]: () => import("../../../table"),
-  [`${SHADCN_IMPORT_PREFIX}/tabs`]: () => import("../../../tabs"),
-  [`${SHADCN_IMPORT_PREFIX}/textarea`]: () => import("../../../textarea"),
-  [`${SHADCN_IMPORT_PREFIX}/toggle`]: () => import("../../../toggle"),
-  [`${SHADCN_IMPORT_PREFIX}/toggle-group`]: () =>
-    import("../../../toggle-group"),
-  [`${SHADCN_IMPORT_PREFIX}/tooltip`]: () => import("../../../tooltip"),
-
-  ///// WIDGETS FROM CHAT_UI /////
-  [`@llamaindex/chat-ui/widgets`]: () => import("@llamaindex/chat-ui/widgets"),
-
-  ///// ICONS /////
-  [`lucide-react`]: () => import("lucide-react"),
-
-  ///// UTILS /////
-  [`@/components/lib/utils`]: () => import("../../../lib/utils"),
-  [`@/lib/utils`]: () => import("../../../lib/utils"), // for v0 compatibility
-};
-
-// parse imports from code to get Function constructor arguments and component name
-export async function parseImports(code: string) {
-  const imports: { name: string; source: string }[] = []; // e.g., [{ name: "Button", source: "@/components/ui/button" }]
-  let componentName: string | null = null;
-
-  const ast = parse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript"],
-  });
-
-  // Traverse the AST to find import declarations
-  traverse(ast, {
-    // Find import declarations
-    ImportDeclaration(path) {
-      path.node.specifiers.forEach((specifier) => {
-        if (
-          specifier.type === "ImportSpecifier" ||
-          specifier.type === "ImportDefaultSpecifier"
-        ) {
-          imports.push({
-            name: specifier.local.name, // e.g., "Button"
-            source: path.node.source.value, // e.g., "@/components/ui/button"
-          });
-        }
-      });
-    },
-    // Find export default declaration
-    ExportDefaultDeclaration(path) {
-      const declaration = path.node.declaration;
-      if (declaration.type === "FunctionDeclaration" && declaration.id) {
-        componentName = declaration.id.name; // e.g., "EventTimeline"
-      } else if (
-        declaration.type === "Identifier" &&
-        path.scope.hasBinding(declaration.name)
-      ) {
-        componentName = declaration.name; // e.g., named function assigned to export
-      }
-    },
-  });
-
-  // Dynamically import the modules
-  const importPromises = imports.map(async ({ name, source }) => {
-    if (!(source in SOURCE_MAP)) {
-      throw new Error(
-        `Fail to import ${name} from ${source}. Reason: Module not found. \nCurrently we only support importing UI components from Shadcn components, widgets from "llamaindex/chat-ui/widgets" and icons from "lucide-react"`,
-      );
-    }
-    try {
-      const module = await SOURCE_MAP[source]();
-      return { name, module: module[name] };
-    } catch (error) {
-      throw new Error(
-        `Failed to resolve import ${name}. Please check the code and try again.`,
-      );
-    }
-  });
-
-  const resolvedImports = await Promise.all(importPromises);
-
-  // Create a map of import names to their resolved modules (always include React)
-  const importMap: Record<string, any> = { React };
-  resolvedImports.forEach(({ name, module }) => {
-    if (module) {
-      importMap[name] = module;
-    }
-  });
-
-  return { componentName, importMap };
-}

packages/server/next/app/components/ui/chat/custom/events/loader.ts

@@ -1,134 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-"use client";
-
-import * as Babel from "@babel/standalone";
-import { FunctionComponent } from "react";
-import { getConfig } from "../../../lib/utils";
-import { parseImports } from "./import";
-import { ComponentDef } from "./types";
-
-export type SourceComponentDef = {
-  type: string;
-  code: string;
-  filename: string;
-};
-
-export async function fetchComponentDefinitions(): Promise<{
-  components: ComponentDef[];
-  errors: string[];
-}> {
-  const endpoint = getConfig("COMPONENTS_API");
-  if (!endpoint) {
-    console.warn("/api/components endpoint is not defined in config");
-    return { components: [], errors: [] };
-  }
-
-  const response = await fetch(endpoint);
-  const components = (await response.json()) as SourceComponentDef[];
-
-  // Only need to handle transpilation now
-  const transpiledComponents = await Promise.all(
-    components.map(async (comp) => {
-      const { component, error } = await parseComponent(
-        comp.code,
-        comp.filename,
-      );
-      return {
-        type: comp.type,
-        comp: component,
-        error,
-      };
-    }),
-  );
-
-  const validComponents = transpiledComponents
-    .map((comp) => ({
-      type: comp.type,
-      comp: comp.comp,
-    }))
-    .filter((comp): comp is ComponentDef => comp.comp !== null);
-
-  const uniqueErrors = transpiledComponents
-    .map((comp) => comp.error)
-    .filter((error): error is string => error !== undefined);
-
-  return {
-    components: validComponents,
-    errors: uniqueErrors,
-  };
-}
-
-// create React component from code
-export async function parseComponent(
-  code: string,
-  filename: string,
-): Promise<{ component: FunctionComponent<any> | null; error?: string }> {
-  try {
-    const [transpiledCode, resolvedImports] = await Promise.all([
-      transpileCode(code, filename),
-      parseImports(code),
-    ]);
-
-    const component = await createComponentFromCode(
-      transpiledCode,
-      resolvedImports.importMap,
-      resolvedImports.componentName,
-    );
-
-    return { component };
-  } catch (error) {
-    console.warn(`Failed to parse component from ${filename}`, error);
-    return {
-      component: null,
-      error: error instanceof Error ? error.message : "Unknown error",
-    };
-  }
-}
-
-// convert TSX code to JS code using Babel, also remove all import declarations in the top of code
-async function transpileCode(code: string, filename: string) {
-  const transpilationCustomPlugin = () => ({
-    visitor: {
-      ImportDeclaration(path: any) {
-        // remove all import declarations in the top of code (already passed imports to Function constructor)
-        // eg: import { Button } from "@/components/ui/button" -> remove
-        path.remove();
-      },
-      ExportDefaultDeclaration(path: any) {
-        // remove export default declaration (already passed component name to Function constructor)
-        // eg: export default function EventTimeline() { ... } -> function EventTimeline() { ... }
-        path.replaceWith(path.node.declaration);
-      },
-    },
-  });
-
-  const transpiledCode = Babel.transform(code, {
-    presets: ["react", "typescript"],
-    plugins: [transpilationCustomPlugin],
-    filename,
-  }).code;
-
-  if (!transpiledCode) {
-    throw new Error(`Transpiled code is empty for ${filename}`);
-  }
-
-  return transpiledCode;
-}
-
-async function createComponentFromCode(
-  transpiledCode: string,
-  importMap: Record<string, any>,
-  componentName: string | null = "Component",
-): Promise<FunctionComponent<any> | null> {
-  const argNames = Object.keys(importMap); // e.g., ["React", "Button", "Badge"]
-  const argValues = Object.values(importMap); // list of corresponding modules
-
-  // Create the component function
-  const componentFn = new Function(
-    ...argNames,
-    `${transpiledCode}; return ${componentName};`,
-  );
-
-  // Call the component function with the imported modules
-  return componentFn(...argValues);
-}

packages/server/next/app/components/ui/chat/custom/events/types.ts

@@ -1,7 +0,0 @@
-import { JSONValue } from "@llamaindex/chat-ui";
-import { FunctionComponent } from "react";
-
-export type ComponentDef = {
-  type: string; // eg. deep_research_event
-  comp: FunctionComponent<{ events: JSONValue[] }>;
-};

packages/server/next/app/components/ui/chat/custom/llama-cloud-selector.tsx

@@ -1,185 +0,0 @@
-"use client";
-
-import { useChatUI } from "@llamaindex/chat-ui";
-import { Loader2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { getConfig } from "../../lib/utils";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../../select";
-
-type LLamaCloudPipeline = {
-  id: string;
-  name: string;
-};
-
-type LLamaCloudProject = {
-  id: string;
-  organization_id: string;
-  name: string;
-  is_default: boolean;
-  pipelines: Array<LLamaCloudPipeline>;
-};
-
-type PipelineConfig = {
-  project: string; // project name
-  pipeline: string; // pipeline name
-};
-
-type LlamaCloudConfig = {
-  projects?: LLamaCloudProject[];
-  pipeline?: PipelineConfig;
-};
-
-export interface LlamaCloudSelectorProps {
-  onSelect?: (pipeline: PipelineConfig | undefined) => void;
-  defaultPipeline?: PipelineConfig;
-  shouldCheckValid?: boolean;
-}
-
-export function LlamaCloudSelector({
-  onSelect,
-  defaultPipeline,
-  shouldCheckValid = false,
-}: LlamaCloudSelectorProps) {
-  const { setRequestData } = useChatUI();
-  const [config, setConfig] = useState<LlamaCloudConfig>();
-
-  const updateRequestParams = useCallback(
-    (pipeline?: PipelineConfig) => {
-      if (setRequestData) {
-        setRequestData({
-          llamaCloudPipeline: pipeline,
-        });
-      } else {
-        onSelect?.(pipeline);
-      }
-    },
-    [onSelect, setRequestData],
-  );
-
-  useEffect(() => {
-    if (!config && getConfig("LLAMA_CLOUD_API")) {
-      fetch(getConfig("LLAMA_CLOUD_API"))
-        .then((response) => {
-          if (!response.ok) {
-            return response.json().then((errorData) => {
-              window.alert(
-                `Error: ${JSON.stringify(errorData) || "Unknown error occurred"}`,
-              );
-            });
-          }
-          return response.json();
-        })
-        .then((data) => {
-          const pipeline = defaultPipeline ?? data.pipeline; // defaultPipeline will override pipeline in .env
-          setConfig({ ...data, pipeline });
-          updateRequestParams(pipeline);
-        })
-        .catch((error) => console.error("Error fetching config", error));
-    }
-  }, [config, defaultPipeline, updateRequestParams]);
-
-  const setPipeline = (pipelineConfig?: PipelineConfig) => {
-    setConfig((prevConfig) => ({
-      ...prevConfig,
-      pipeline: pipelineConfig,
-    }));
-    updateRequestParams(pipelineConfig);
-  };
-
-  const handlePipelineSelect = async (value: string) => {
-    setPipeline(JSON.parse(value) as PipelineConfig);
-  };
-
-  if (!config) {
-    return (
-      <div className="flex items-center justify-center p-3">
-        <Loader2 className="h-4 w-4 animate-spin" />
-      </div>
-    );
-  }
-
-  if (shouldCheckValid && !isValid(config.projects, config.pipeline)) {
-    return (
-      <p className="text-red-500">
-        Invalid LlamaCloud configuration. Check console logs.
-      </p>
-    );
-  }
-  const { projects, pipeline } = config;
-
-  return (
-    <Select
-      onValueChange={handlePipelineSelect}
-      defaultValue={
-        isValid(projects, pipeline, false)
-          ? JSON.stringify(pipeline)
-          : undefined
-      }
-    >
-      <SelectTrigger className="w-[200px]">
-        <SelectValue placeholder="Select a pipeline" />
-      </SelectTrigger>
-      <SelectContent>
-        {projects!.map((project: LLamaCloudProject) => (
-          <SelectGroup key={project.id}>
-            <SelectLabel className="capitalize">
-              Project: {project.name}
-            </SelectLabel>
-            {project.pipelines.map((pipeline) => (
-              <SelectItem
-                key={pipeline.id}
-                className="last:border-b"
-                value={JSON.stringify({
-                  pipeline: pipeline.name,
-                  project: project.name,
-                })}
-              >
-                <span className="pl-2">{pipeline.name}</span>
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
-
-function isValid(
-  projects: LLamaCloudProject[] | undefined,
-  pipeline: PipelineConfig | undefined,
-  logErrors: boolean = true,
-): boolean {
-  if (!projects?.length) return false;
-  if (!pipeline) return false;
-  const matchedProject = projects.find(
-    (project: LLamaCloudProject) => project.name === pipeline.project,
-  );
-  if (!matchedProject) {
-    if (logErrors) {
-      console.error(
-        `LlamaCloud project ${pipeline.project} not found. Check LLAMA_CLOUD_PROJECT_NAME variable`,
-      );
-    }
-    return false;
-  }
-  const pipelineExists = matchedProject.pipelines.some(
-    (p) => p.name === pipeline.pipeline,
-  );
-  if (!pipelineExists) {
-    if (logErrors) {
-      console.error(
-        `LlamaCloud pipeline ${pipeline.pipeline} not found. Check LLAMA_CLOUD_INDEX_NAME variable`,
-      );
-    }
-    return false;
-  }
-  return true;
-}

packages/server/next/app/components/ui/chat/custom/markdown.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { SourceData } from "@llamaindex/chat-ui";
-import { Markdown as MarkdownUI } from "@llamaindex/chat-ui/widgets";
-import { getConfig } from "../../lib/utils";
-const preprocessMedia = (content: string) => {
-  // Remove `sandbox:` from the beginning of the URL before rendering markdown
-  // OpenAI models sometimes prepend `sandbox:` to relative URLs - this fixes it
-  return content.replace(/(sandbox|attachment|snt):/g, "");
-};
-
-export function Markdown({
-  content,
-  sources,
-}: {
-  content: string;
-  sources?: SourceData;
-}) {
-  const processedContent = preprocessMedia(content);
-  return (
-    <MarkdownUI
-      content={processedContent}
-      backend={getConfig("BACKEND")}
-      sources={sources}
-    />
-  );
-}

packages/server/next/app/components/ui/chat/hooks/use-copy-to-clipboard.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-export interface useCopyToClipboardProps {
-  timeout?: number;
-}
-
-export function useCopyToClipboard({
-  timeout = 2000,
-}: useCopyToClipboardProps) {
-  const [isCopied, setIsCopied] = React.useState(false);
-
-  const copyToClipboard = (value: string) => {
-    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
-      return;
-    }
-
-    if (!value) {
-      return;
-    }
-
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-
-      setTimeout(() => {
-        setIsCopied(false);
-      }, timeout);
-    });
-  };
-
-  return { isCopied, copyToClipboard };
-}

packages/server/next/app/components/ui/chat/tools/chat-tools.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import {
-  Message,
-  MessageAnnotation,
-  getChatUIAnnotation,
-  useChatMessage,
-  useChatUI,
-} from "@llamaindex/chat-ui";
-import { JSONValue } from "ai";
-import { useMemo } from "react";
-import { WeatherCard, WeatherData } from "./weather-card";
-
-export function ToolAnnotations() {
-  // TODO: This is a bit of a hack to get the artifact version. better to generate the version in the tool call and
-  // store it in CodeArtifact
-  const { messages } = useChatUI();
-  const { message } = useChatMessage();
-  const artifactVersion = useMemo(
-    () => getArtifactVersion(messages, message),
-    [messages, message],
-  );
-  // Get the tool data from the message annotations
-  const annotations = message.annotations as MessageAnnotation[] | undefined;
-  const toolData = annotations
-    ? (getChatUIAnnotation(annotations, "tools") as unknown as ToolData[])
-    : null;
-  return toolData?.[0] ? (
-    <ChatTools data={toolData[0]} artifactVersion={artifactVersion} />
-  ) : null;
-}
-
-// TODO: Used to render outputs of tools. If needed, add more renderers here.
-function ChatTools({
-  data,
-  artifactVersion,
-}: {
-  data: ToolData;
-  artifactVersion: number | undefined;
-}) {
-  if (!data) return null;
-  const { toolCall, toolOutput } = data;
-
-  if (toolOutput.isError) {
-    return (
-      <div className="border-l-2 border-red-400 pl-2">
-        There was an error when calling the tool {toolCall.name} with input:{" "}
-        <br />
-        {JSON.stringify(toolCall.input)}
-      </div>
-    );
-  }
-
-  switch (toolCall.name) {
-    case "get_weather_information": {
-      const weatherData = toolOutput.output as unknown as WeatherData;
-      return <WeatherCard data={weatherData} />;
-    }
-    default:
-      return null;
-  }
-}
-
-type ToolData = {
-  toolCall: {
-    id: string;
-    name: string;
-    input: {
-      [key: string]: JSONValue;
-    };
-  };
-  toolOutput: {
-    output: JSONValue;
-    isError: boolean;
-  };
-};
-
-function getArtifactVersion(
-  messages: Message[],
-  message: Message,
-): number | undefined {
-  const messageId = "id" in message ? message.id : undefined;
-  if (!messageId) return undefined;
-  let versionIndex = 1;
-  for (const m of messages) {
-    const toolData = m.annotations
-      ? (getChatUIAnnotation(m.annotations, "tools") as unknown as ToolData[])
-      : null;
-
-    if (toolData?.some((t) => t.toolCall.name === "artifact")) {
-      if ("id" in m && m.id === messageId) {
-        return versionIndex;
-      }
-      versionIndex++;
-    }
-  }
-  return undefined;
-}

packages/server/next/app/components/ui/chat/tools/weather-card.tsx

@@ -1,215 +0,0 @@
-"use client";
-
-export interface WeatherData {
-  latitude: number;
-  longitude: number;
-  generationtime_ms: number;
-  utc_offset_seconds: number;
-  timezone: string;
-  timezone_abbreviation: string;
-  elevation: number;
-  current_units: {
-    time: string;
-    interval: string;
-    temperature_2m: string;
-    weather_code: string;
-  };
-  current: {
-    time: string;
-    interval: number;
-    temperature_2m: number;
-    weather_code: number;
-  };
-  hourly_units: {
-    time: string;
-    temperature_2m: string;
-    weather_code: string;
-  };
-  hourly: {
-    time: string[];
-    temperature_2m: number[];
-    weather_code: number[];
-  };
-  daily_units: {
-    time: string;
-    weather_code: string;
-  };
-  daily: {
-    time: string[];
-    weather_code: number[];
-  };
-}
-
-// Follow WMO Weather interpretation codes (WW)
-const weatherCodeDisplayMap: Record<
-  string,
-  {
-    icon: React.ReactNode;
-    status: string;
-  }
-> = {
-  "0": {
-    icon: <span>☀️</span>,
-    status: "Clear sky",
-  },
-  "1": {
-    icon: <span>🌤️</span>,
-    status: "Mainly clear",
-  },
-  "2": {
-    icon: <span>☁️</span>,
-    status: "Partly cloudy",
-  },
-  "3": {
-    icon: <span>☁️</span>,
-    status: "Overcast",
-  },
-  "45": {
-    icon: <span>🌫️</span>,
-    status: "Fog",
-  },
-  "48": {
-    icon: <span>🌫️</span>,
-    status: "Depositing rime fog",
-  },
-  "51": {
-    icon: <span>🌧️</span>,
-    status: "Drizzle",
-  },
-  "53": {
-    icon: <span>🌧️</span>,
-    status: "Drizzle",
-  },
-  "55": {
-    icon: <span>🌧️</span>,
-    status: "Drizzle",
-  },
-  "56": {
-    icon: <span>🌧️</span>,
-    status: "Freezing Drizzle",
-  },
-  "57": {
-    icon: <span>🌧️</span>,
-    status: "Freezing Drizzle",
-  },
-  "61": {
-    icon: <span>🌧️</span>,
-    status: "Rain",
-  },
-  "63": {
-    icon: <span>🌧️</span>,
-    status: "Rain",
-  },
-  "65": {
-    icon: <span>🌧️</span>,
-    status: "Rain",
-  },
-  "66": {
-    icon: <span>🌧️</span>,
-    status: "Freezing Rain",
-  },
-  "67": {
-    icon: <span>🌧️</span>,
-    status: "Freezing Rain",
-  },
-  "71": {
-    icon: <span>❄️</span>,
-    status: "Snow fall",
-  },
-  "73": {
-    icon: <span>❄️</span>,
-    status: "Snow fall",
-  },
-  "75": {
-    icon: <span>❄️</span>,
-    status: "Snow fall",
-  },
-  "77": {
-    icon: <span>❄️</span>,
-    status: "Snow grains",
-  },
-  "80": {
-    icon: <span>🌧️</span>,
-    status: "Rain showers",
-  },
-  "81": {
-    icon: <span>🌧️</span>,
-    status: "Rain showers",
-  },
-  "82": {
-    icon: <span>🌧️</span>,
-    status: "Rain showers",
-  },
-  "85": {
-    icon: <span>❄️</span>,
-    status: "Snow showers",
-  },
-  "86": {
-    icon: <span>❄️</span>,
-    status: "Snow showers",
-  },
-  "95": {
-    icon: <span>⛈️</span>,
-    status: "Thunderstorm",
-  },
-  "96": {
-    icon: <span>⛈️</span>,
-    status: "Thunderstorm",
-  },
-  "99": {
-    icon: <span>⛈️</span>,
-    status: "Thunderstorm",
-  },
-};
-
-const displayDay = (time: string) => {
-  return new Date(time).toLocaleDateString("en-US", {
-    weekday: "long",
-  });
-};
-
-export function WeatherCard({ data }: { data: WeatherData }) {
-  const currentDayString = new Date(data.current.time).toLocaleDateString(
-    "en-US",
-    {
-      weekday: "long",
-      month: "long",
-      day: "numeric",
-    },
-  );
-
-  return (
-    <div className="w-fit space-y-4 rounded-2xl bg-[#61B9F2] p-5 text-white shadow-xl">
-      <div className="flex justify-between">
-        <div className="space-y-2">
-          <div className="text-xl">{currentDayString}</div>
-          <div className="flex gap-4 text-5xl font-semibold">
-            <span>
-              {data.current.temperature_2m} {data.current_units.temperature_2m}
-            </span>
-            {weatherCodeDisplayMap[data.current.weather_code].icon}
-          </div>
-        </div>
-        <span className="text-xl">
-          {weatherCodeDisplayMap[data.current.weather_code].status}
-        </span>
-      </div>
-      <div className="grid grid-cols-6 gap-2">
-        {data.daily.time.map((time, index) => {
-          if (index === 0) return null; // skip the current day
-          return (
-            <div key={time} className="flex flex-col items-center gap-4">
-              <span>{displayDay(time)}</span>
-              <div className="text-4xl">
-                {weatherCodeDisplayMap[data.daily.weather_code[index]].icon}
-              </div>
-              <span className="text-sm">
-                {weatherCodeDisplayMap[data.daily.weather_code[index]].status}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

packages/server/next/app/components/ui/checkbox.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };

packages/server/next/app/components/ui/collapsible.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-const Collapsible = CollapsiblePrimitive.Root;
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-export { Collapsible, CollapsibleContent, CollapsibleTrigger };

packages/server/next/app/components/ui/command.tsx

@@ -1,177 +0,0 @@
-"use client";
-
-import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react";
-import * as React from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog";
-import { cn } from "./lib/utils";
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  );
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-};

packages/server/next/app/components/ui/context-menu.tsx

@@ -1,252 +0,0 @@
-"use client";
-
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
-}
-
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  );
-}
-
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  );
-}
-
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  );
-}
-
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  );
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  );
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  );
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-};

packages/server/next/app/components/ui/dialog.tsx

@@ -1,135 +0,0 @@
-"use client";
-
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

packages/server/next/app/components/ui/drawer.tsx

@@ -1,132 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-
-import { cn } from "./lib/utils";
-
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
-}
-
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
-}
-
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
-}
-
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DrawerContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className,
-        )}
-        {...props}
-      >
-        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  );
-}
-
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  );
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  );
-}
-
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  DrawerPortal,
-  DrawerTitle,
-  DrawerTrigger,
-};

packages/server/next/app/components/ui/dropdown-menu.tsx

@@ -1,257 +0,0 @@
-"use client";
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  );
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};

packages/server/next/app/components/ui/form.tsx

@@ -1,168 +0,0 @@
-"use client";
-
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form";
-
-import { Label } from "./label";
-import { cn } from "./lib/utils";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  );
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-}
-
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useFormField,
-};

packages/server/next/app/components/ui/hooks/use-mobile.ts

@@ -1,23 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

packages/server/next/app/components/ui/hover-card.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
-}
-
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  );
-}
-
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
-}
-
-export { HoverCard, HoverCardContent, HoverCardTrigger };

packages/server/next/app/components/ui/input-otp.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName,
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  );
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
-      {...props}
-    />
-  );
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  index: number;
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  );
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

packages/server/next/app/components/ui/input.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

packages/server/next/app/components/ui/label.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };

packages/server/next/app/components/ui/lib/utils.ts

@@ -1,13 +0,0 @@
-"use client";
-
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export const getConfig = (name: string) => {
-  if (typeof window === "undefined") return undefined;
-  return (window as any).LLAMAINDEX?.[name];
-};

packages/server/next/app/components/ui/menubar.tsx

@@ -1,276 +0,0 @@
-"use client";
-
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  );
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  );
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  );
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  );
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  );
-}
-
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarGroup,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarPortal,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-};

packages/server/next/app/components/ui/navigation-menu.tsx

@@ -1,170 +0,0 @@
-"use client";
-
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDownIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean;
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  );
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  );
-}
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
-);
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
-      {...props}
-    >
-      {children}{" "}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  );
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center",
-      )}
-    >
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  );
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-  NavigationMenuViewport,
-};

packages/server/next/app/components/ui/pagination.tsx

@@ -1,129 +0,0 @@
-"use client";
-
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react";
-import * as React from "react";
-
-import { Button, buttonVariants } from "./button";
-import { cn } from "./lib/utils";
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />;
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">;
-
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "outline" : "ghost",
-          size,
-        }),
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
-      {...props}
-    >
-      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  );
-}
-
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
-      {...props}
-    >
-      <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </PaginationLink>
-  );
-}
-
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-};

packages/server/next/app/components/ui/popover.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

packages/server/next/app/components/ui/progress.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export { Progress };

packages/server/next/app/components/ui/radio-group.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-3", className)}
-      {...props}
-    />
-  );
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-}
-
-export { RadioGroup, RadioGroupItem };

packages/server/next/app/components/ui/resizable.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { GripVerticalIcon } from "lucide-react";
-import * as React from "react";
-import * as ResizablePrimitive from "react-resizable-panels";
-
-import { cn } from "./lib/utils";
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className,
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  );
-}
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

packages/server/next/app/components/ui/scroll-area.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className,
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-}
-
-export { ScrollArea, ScrollBar };

packages/server/next/app/components/ui/select.tsx

@@ -1,159 +0,0 @@
-"use client";
-
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import * as React from "react";
-import { cn } from "./lib/utils";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pr-2 pl-8 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};

packages/server/next/app/components/ui/separator.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator-root"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Separator };

packages/server/next/app/components/ui/sheet.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
-}
-
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
-}
-
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
-}
-
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
-}
-
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left";
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  );
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  );
-}
-
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-};

packages/server/next/app/components/ui/sidebar.tsx

@@ -1,726 +0,0 @@
-"use client";
-
-import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeftIcon } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "./button";
-import { useIsMobile } from "./hooks/use-mobile";
-import { Input } from "./input";
-import { cn } from "./lib/utils";
-import { Separator } from "./separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "./sheet";
-import { Skeleton } from "./skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip";
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-
-  return context;
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}) {
-  const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React.useState(false);
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen);
-  const open = openProp ?? _open;
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value;
-      if (setOpenProp) {
-        setOpenProp(openState);
-      } else {
-        _setOpen(openState);
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-    },
-    [setOpenProp, open],
-  );
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-  }, [isMobile, setOpen, setOpenMobile]);
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggleSidebar]);
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed";
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-  );
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  );
-}
-
-function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right";
-  variant?: "sidebar" | "floating" | "inset";
-  collapsible?: "offcanvas" | "icon" | "none";
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    );
-  }
-
-  return (
-    <div
-      className="text-sidebar-foreground group peer hidden md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className,
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div";
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  );
-}
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean;
-  isActive?: boolean;
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button";
-  const { isMobile, state } = useSidebar();
-
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-
-  if (!tooltip) {
-    return button;
-  }
-
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    };
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  );
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean;
-  showOnHover?: boolean;
-}) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showIcon?: boolean;
-}) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean;
-  size?: "sm" | "md";
-  isActive?: boolean;
-}) {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-};

packages/server/next/app/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { cn } from "./lib/utils";
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

packages/server/next/app/components/ui/slider.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max],
-  );
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className,
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
-}
-
-export { Slider };

packages/server/next/app/components/ui/sonner.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, ToasterProps } from "sonner";
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

packages/server/next/app/components/ui/switch.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
-}
-
-export { Switch };

packages/server/next/app/components/ui/table.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  );
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  );
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-};

packages/server/next/app/components/ui/tabs.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-import { cn } from "./lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

packages/server/next/app/components/ui/textarea.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Textarea };

packages/server/next/app/components/ui/toggle-group.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-import { toggleVariants } from "./toggle";
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-});
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      className={cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className,
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };

packages/server/next/app/components/ui/toggle.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Toggle, toggleVariants };

packages/server/next/app/components/ui/tooltip.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from "./lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

packages/server/next/app/globals.css

@@ -1,267 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source '../../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
-@source '../app/**/*.{ts,tsx}';
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  --font-sans:
-    var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@utility container {
-  margin-inline: auto;
-  padding-inline: 2rem;
-  @media (width >= --theme(--breakpoint-sm)) {
-    max-width: none;
-  }
-  @media (width >= 1400px) {
-    max-width: 1400px;
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-
-    --sidebar: hsl(0 0% 98%);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
-    --sidebar-primary: hsl(240 5.9% 10%);
-    --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: hsl(240 4.8% 95.9%);
-    --sidebar-accent-foreground: hsl(240 5.9% 10%);
-    --sidebar-border: hsl(220 13% 91%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-
-    --sidebar: hsl(240 5.9% 10%);
-    --sidebar-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-primary: hsl(224.3 76.3% 48%);
-    --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(240 3.7% 15.9%);
-    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: hsl(240 3.7% 15.9%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  html {
-    @apply h-full;
-  }
-  body {
-    @apply bg-background text-foreground h-full;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-  .background-gradient {
-    background-color: #fff;
-    background-image:
-      radial-gradient(at 21% 11%, rgba(186, 186, 233, 0.53) 0, transparent 50%),
-      radial-gradient(at 85% 0, hsla(46, 57%, 78%, 0.52) 0, transparent 50%),
-      radial-gradient(at 91% 36%, rgba(194, 213, 255, 0.68) 0, transparent 50%),
-      radial-gradient(at 8% 40%, rgba(251, 218, 239, 0.46) 0, transparent 50%);
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .fadein-agent {
-    animation-name: fadeIn;
-    animation-duration: 1.5s;
-  }
-
-  @keyframes slideIn {
-    from {
-      transform: translateX(10%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  .animate-slideIn {
-    animation: slideIn 0.5s ease-out;
-  }
-}
-
-.components-container * {
-  font-family: inherit !important;
-}
-
-@theme inline {
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}

packages/server/next/app/layout.tsx

@@ -1,26 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-
-import "@llamaindex/chat-ui/styles/markdown.css";
-import "@llamaindex/chat-ui/styles/pdf.css";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Llama App",
-  description: "Generated by create-llama",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-      <script async src="./config.js"></script>
-    </html>
-  );
-}

packages/server/next/app/page.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-
-const ChatSection = dynamic(() => import("./components/ui/chat/chat-section"), {
-  ssr: false,
-  loading: () => (
-    <div className="flex h-full w-full items-center justify-center">
-      <Loader2 className="text-muted-foreground animate-spin" />
-    </div>
-  ),
-});
-
-export default function Home() {
-  return <ChatSection />;
-}

packages/server/next/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/app/components",
-    "utils": "@/app/components/ui/lib/utils",
-    "ui": "@/app/components/ui",
-    "lib": "@/app/components/ui/lib",
-    "hooks": "@/app/components/ui/hooks"
-  },
-  "iconLibrary": "lucide"
-}

packages/server/next/next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "export",
-};
-
-export default nextConfig;

packages/server/next/postcss.config.js

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};

packages/server/next/public/config.js

@@ -1,9 +0,0 @@
-window.LLAMAINDEX = {
-  CHAT_API: "/api/chat",
-  APP_TITLE: "Deep Research App",
-  LLAMA_CLOUD_API: undefined,
-  STARTER_QUESTIONS: [
-    "Research about Apple and Tesla revenue",
-    "How to improve the revenue of Apple and Tesla",
-  ],
-};