+
+
+
-
-
-
C.O.R.E.
{children}
diff --git a/apps/webapp/app/components/sidebar/app-sidebar.tsx b/apps/webapp/app/components/sidebar/app-sidebar.tsx
index c1b10cd..5ff81b1 100644
--- a/apps/webapp/app/components/sidebar/app-sidebar.tsx
+++ b/apps/webapp/app/components/sidebar/app-sidebar.tsx
@@ -17,8 +17,8 @@ import Logo from "../logo/logo";
const data = {
navMain: [
{
- title: "Chat",
- url: "/home/chat",
+ title: "Conversation",
+ url: "/home/conversation",
icon: MessageSquare,
},
{
diff --git a/apps/webapp/app/components/ui/header.tsx b/apps/webapp/app/components/ui/header.tsx
index 99571fc..dd1db50 100644
--- a/apps/webapp/app/components/ui/header.tsx
+++ b/apps/webapp/app/components/ui/header.tsx
@@ -2,7 +2,7 @@ import { useLocation } from "@remix-run/react";
const PAGE_TITLES: Record
= {
"/home/dashboard": "Memory graph",
- "/home/chat": "Chat",
+ "/home/conversation": "Conversation",
"/home/integrations": "Integrations",
"/home/activity": "Activity",
};
diff --git a/apps/webapp/app/components/use-auto-scroll.tsx b/apps/webapp/app/components/use-auto-scroll.tsx
new file mode 100644
index 0000000..14277b0
--- /dev/null
+++ b/apps/webapp/app/components/use-auto-scroll.tsx
@@ -0,0 +1,169 @@
+// @hidden
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "~/lib/utils";
+
+interface ScrollState {
+ isAtBottom: boolean;
+ autoScrollEnabled: boolean;
+}
+
+interface UseAutoScrollOptions {
+ offset?: number;
+ smooth?: boolean;
+ content?: React.ReactNode;
+}
+
+export function useAutoScroll(options: UseAutoScrollOptions = {}) {
+ const { offset = 20, smooth = false, content } = options;
+ const scrollRef = useRef(null);
+ const lastContentHeight = useRef(0);
+ const userHasScrolled = useRef(false);
+
+ const [scrollState, setScrollState] = useState({
+ isAtBottom: false,
+ autoScrollEnabled: true,
+ });
+
+ const checkIsAtBottom = useCallback(
+ (element: HTMLElement) => {
+ const { scrollTop, scrollHeight, clientHeight } = element;
+ const distanceToBottom = Math.abs(
+ scrollHeight - scrollTop - clientHeight,
+ );
+ return distanceToBottom <= offset;
+ },
+ [offset],
+ );
+
+ const scrollToBottom = useCallback(
+ (instant?: boolean) => {
+ if (scrollRef.current) {
+ const targetScrollTop =
+ scrollRef.current.scrollHeight - scrollRef.current.clientHeight;
+
+ if (instant) {
+ scrollRef.current.scrollTop = targetScrollTop;
+ } else {
+ scrollRef.current.scrollTo({
+ top: targetScrollTop,
+ behavior: smooth ? "smooth" : "auto",
+ });
+ }
+
+ setScrollState({
+ isAtBottom: true,
+ autoScrollEnabled: true,
+ });
+ userHasScrolled.current = false;
+ }
+ },
+ [smooth],
+ );
+
+ const handleScroll = useCallback(() => {
+ if (scrollRef.current) {
+ const atBottom = checkIsAtBottom(scrollRef.current);
+
+ setScrollState((prev) => ({
+ isAtBottom: atBottom,
+ // Re-enable auto-scroll if at the bottom
+ autoScrollEnabled: atBottom ? true : prev.autoScrollEnabled,
+ }));
+ }
+ }, [checkIsAtBottom]);
+
+ useEffect(() => {
+ const element = scrollRef.current;
+ if (element) {
+ element.addEventListener("scroll", handleScroll, { passive: true });
+ }
+
+ return () =>
+ element ? element.removeEventListener("scroll", handleScroll) : undefined;
+ }, [handleScroll]);
+
+ useEffect(() => {
+ const scrollElement = scrollRef.current;
+ if (!scrollElement) {
+ return;
+ }
+
+ const currentHeight = scrollElement.scrollHeight;
+ const hasNewContent = currentHeight !== lastContentHeight.current;
+
+ if (hasNewContent) {
+ if (scrollState.autoScrollEnabled) {
+ requestAnimationFrame(() => {
+ scrollToBottom(lastContentHeight.current === 0);
+ });
+ }
+ lastContentHeight.current = currentHeight;
+ }
+ }, [content, scrollState.autoScrollEnabled, scrollToBottom]);
+
+ useEffect(() => {
+ const resizeObserver = new ResizeObserver(() => {
+ if (scrollState.autoScrollEnabled) {
+ scrollToBottom(true);
+ }
+ });
+
+ const element = scrollRef.current;
+ if (element) {
+ resizeObserver.observe(element);
+ }
+
+ return () => resizeObserver.disconnect();
+ }, [scrollState.autoScrollEnabled, scrollToBottom]);
+
+ const disableAutoScroll = useCallback(() => {
+ const atBottom = scrollRef.current
+ ? checkIsAtBottom(scrollRef.current)
+ : false;
+
+ // Only disable if not at bottom
+ if (!atBottom) {
+ userHasScrolled.current = true;
+ setScrollState((prev) => ({
+ ...prev,
+ autoScrollEnabled: false,
+ }));
+ }
+ }, [checkIsAtBottom]);
+
+ return {
+ scrollRef,
+ isAtBottom: scrollState.isAtBottom,
+ autoScrollEnabled: scrollState.autoScrollEnabled,
+ scrollToBottom: () => scrollToBottom(false),
+ disableAutoScroll,
+ };
+}
+
+export const ScrollAreaWithAutoScroll = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ const { scrollRef } = useAutoScroll({
+ smooth: true,
+ content: children,
+ });
+
+ return (
+
+ );
+};
diff --git a/apps/webapp/app/env.server.ts b/apps/webapp/app/env.server.ts
index 783c07b..da834a3 100644
--- a/apps/webapp/app/env.server.ts
+++ b/apps/webapp/app/env.server.ts
@@ -73,6 +73,8 @@ const EnvironmentSchema = z.object({
//Trigger
TRIGGER_PROJECT_ID: z.string(),
+ TRIGGER_SECRET_KEY: z.string(),
+ TRIGGER_API_URL: z.string(),
// Model envs
MODEL: z.string().default(LLMModelEnum.GPT41),
diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx
index 22870b8..8028f39 100644
--- a/apps/webapp/app/root.tsx
+++ b/apps/webapp/app/root.tsx
@@ -31,7 +31,7 @@ import { usePostHog } from "./hooks/usePostHog";
import {
AppContainer,
MainCenteredContainer,
-} from "./components/layout/AppLayout";
+} from "./components/layout/app-layout";
import { RouteErrorDisplay } from "./components/ErrorDisplay";
import { themeSessionResolver } from "./services/sessionStorage.server";
import {
diff --git a/apps/webapp/app/routes/api.v1.add.tsx b/apps/webapp/app/routes/api.v1.add.tsx
new file mode 100644
index 0000000..a86e739
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.add.tsx
@@ -0,0 +1,21 @@
+import { json } from "@remix-run/node";
+
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { addToQueue, IngestBodyRequest } from "~/lib/ingest.server";
+
+const { action, loader } = createActionApiRoute(
+ {
+ body: IngestBodyRequest,
+ allowJWT: true,
+ authorization: {
+ action: "ingest",
+ },
+ corsStrategy: "all",
+ },
+ async ({ body, authentication }) => {
+ const response = addToQueue(body, authentication.userId);
+ return json({ ...response });
+ },
+);
+
+export { action, loader };
diff --git a/apps/webapp/app/routes/api.v1.conversation.$conversationId.stop.tsx b/apps/webapp/app/routes/api.v1.conversation.$conversationId.stop.tsx
index e469908..a6f3862 100644
--- a/apps/webapp/app/routes/api.v1.conversation.$conversationId.stop.tsx
+++ b/apps/webapp/app/routes/api.v1.conversation.$conversationId.stop.tsx
@@ -22,6 +22,7 @@ const { action, loader } = createActionApiRoute(
action: "oauth",
},
corsStrategy: "all",
+ method: "POST",
},
async ({ authentication, params }) => {
const workspace = await getWorkspaceByUser(authentication.userId);
diff --git a/apps/webapp/app/routes/api.v1.conversations.tsx b/apps/webapp/app/routes/api.v1.conversations.tsx
new file mode 100644
index 0000000..d850f4a
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.conversations.tsx
@@ -0,0 +1,41 @@
+import { json } from "@remix-run/node";
+import { getWorkspaceByUser } from "~/models/workspace.server";
+import {
+ getConversationsList,
+ GetConversationsListSchema,
+} from "~/services/conversation.server";
+import { requireUser } from "~/services/session.server";
+
+export const loader = async ({ request }: { request: Request }) => {
+ // Authenticate the request (allow JWT)
+ const user = await requireUser(request);
+
+ // Parse search params using the schema
+ const url = new URL(request.url);
+ const searchParamsObj: Record = {};
+ url.searchParams.forEach((value, key) => {
+ searchParamsObj[key] = value;
+ });
+ const parseResult = GetConversationsListSchema.safeParse(searchParamsObj);
+ if (!parseResult.success) {
+ return json(
+ { error: "Invalid search parameters", details: parseResult.error.errors },
+ { status: 400 },
+ );
+ }
+ const searchParams = parseResult.data;
+
+ const workspace = await getWorkspaceByUser(user.id);
+
+ if (!workspace) {
+ return json({ error: "No workspace found" }, { status: 404 });
+ }
+
+ const result = await getConversationsList(
+ workspace.id,
+ user.id,
+ searchParams || {},
+ );
+
+ return json(result);
+};
diff --git a/apps/webapp/app/routes/api.v1.search.tsx b/apps/webapp/app/routes/api.v1.search.tsx
new file mode 100644
index 0000000..342a703
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.search.tsx
@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { SearchService } from "~/services/search.server";
+import { json } from "@remix-run/node";
+
+export const SearchBodyRequest = z.object({
+ query: z.string(),
+ startTime: z.string().optional(),
+ endTime: z.string().optional(),
+
+ // These are not supported yet, but need to support these
+ spaceId: z.string().optional(),
+ limit: z.number().optional(),
+ maxBfsDepth: z.number().optional(),
+ includeInvalidated: z.boolean().optional(),
+ entityTypes: z.array(z.string()).optional(),
+ scoreThreshold: z.number().optional(),
+ minResults: z.number().optional(),
+});
+
+const searchService = new SearchService();
+const { action, loader } = createActionApiRoute(
+ {
+ body: SearchBodyRequest,
+ allowJWT: true,
+ authorization: {
+ action: "search",
+ },
+ corsStrategy: "all",
+ },
+ async ({ body, authentication }) => {
+ const results = await searchService.search(
+ body.query,
+ authentication.userId,
+ {
+ startTime: body.startTime ? new Date(body.startTime) : undefined,
+ endTime: body.endTime ? new Date(body.endTime) : undefined,
+ limit: body.limit,
+ maxBfsDepth: body.maxBfsDepth,
+ includeInvalidated: body.includeInvalidated,
+ entityTypes: body.entityTypes,
+ scoreThreshold: body.scoreThreshold,
+ minResults: body.minResults,
+ },
+ );
+ return json(results);
+ },
+);
+
+export { action, loader };
diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
index fcc517c..56815ea 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -3,7 +3,7 @@ import { useActionData } from "@remix-run/react";
import { type ActionFunctionArgs, json } from "@remix-run/node";
import { useForm } from "@conform-to/react";
import { getFieldsetConstraint, parse } from "@conform-to/zod";
-import { LoginPageLayout } from "~/components/layout/LoginPageLayout";
+import { LoginPageLayout } from "~/components/layout/login-page-layout";
import {
Card,
CardContent,
diff --git a/apps/webapp/app/routes/home.conversation.$conversationId.tsx b/apps/webapp/app/routes/home.conversation.$conversationId.tsx
new file mode 100644
index 0000000..c9197e0
--- /dev/null
+++ b/apps/webapp/app/routes/home.conversation.$conversationId.tsx
@@ -0,0 +1,187 @@
+import {
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from "@remix-run/server-runtime";
+import { sort } from "fast-sort";
+
+import { useParams, useRevalidator } from "@remix-run/react";
+import {
+ requireUser,
+ requireUserId,
+ requireWorkpace,
+} from "~/services/session.server";
+import {
+ getConversationAndHistory,
+ getCurrentConversationRun,
+ stopConversation,
+} from "~/services/conversation.server";
+import { type ConversationHistory } from "@core/database";
+import {
+ ConversationItem,
+ ConversationList,
+ ConversationTextarea,
+ StreamingConversation,
+} from "~/components/conversation";
+import { useTypedLoaderData } from "remix-typedjson";
+import React from "react";
+import { ScrollAreaWithAutoScroll } from "~/components/use-auto-scroll";
+
+import { json } from "@remix-run/node";
+import { env } from "~/env.server";
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "~/components/ui/resizable";
+
+// Example loader accessing params
+export async function loader({ params, request }: LoaderFunctionArgs) {
+ const user = await requireUser(request);
+ const workspace = await requireWorkpace(request);
+ const conversation = await getConversationAndHistory(
+ params.conversationId as string,
+ user.id,
+ );
+
+ if (!conversation) {
+ throw new Error("No conversation found");
+ }
+
+ const run = await getCurrentConversationRun(conversation.id, workspace.id);
+
+ return { conversation, run, apiURL: env.TRIGGER_API_URL };
+}
+
+// Example action accessing params
+export async function action({ params, request }: ActionFunctionArgs) {
+ if (request.method.toUpperCase() !== "POST") {
+ return new Response("Method Not Allowed", { status: 405 });
+ }
+ const userId = await requireUserId(request);
+ const workspace = await requireWorkpace(request);
+ // params.conversationId will be available here
+ const { conversationId } = params;
+
+ if (!conversationId) {
+ throw new Error("No conversation");
+ }
+
+ const result = await stopConversation(conversationId, workspace.id);
+ return json(result);
+}
+
+// Accessing params in the component
+export default function SingleConversation() {
+ const { conversation, run, apiURL } = useTypedLoaderData();
+ const conversationHistory = conversation.ConversationHistory;
+
+ const [conversationResponse, setConversationResponse] = React.useState<
+ { conversationHistoryId: string; id: string; token: string } | undefined
+ >(run);
+
+ const [stopLoading, setStopLoading] = React.useState(false);
+
+ const { conversationId } = useParams();
+ const revalidator = useRevalidator();
+
+ React.useEffect(() => {
+ if (run) {
+ setConversationResponse(run);
+ }
+ }, [run]);
+
+ const getConversations = () => {
+ const lastConversationHistoryId =
+ conversationResponse?.conversationHistoryId;
+
+ // First sort the conversation history by creation time
+ const sortedConversationHistory = sort(conversationHistory).asc(
+ (ch) => ch.createdAt,
+ );
+
+ const lastIndex = sortedConversationHistory.findIndex(
+ (item) => item.id === lastConversationHistoryId,
+ );
+
+ // Filter out any conversation history items that come after the lastConversationHistoryId
+ const filteredConversationHistory = lastConversationHistoryId
+ ? sortedConversationHistory.filter((_ch, currentIndex: number) => {
+ // Find the index of the last conversation history
+
+ // Only keep items that come before or are the last conversation history
+ return currentIndex <= lastIndex;
+ })
+ : sortedConversationHistory;
+
+ return (
+ <>
+ {filteredConversationHistory.map(
+ (ch: ConversationHistory, index: number) => {
+ return ;
+ },
+ )}
+
+ );
+ };
+
+ if (typeof window === "undefined") {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {getConversations()}
+ {conversationResponse && (
+ {
+ setConversationResponse(undefined);
+ revalidator.revalidate();
+ }}
+ apiURL={apiURL}
+ />
+ )}
+
+
+
+
+ {conversation?.status !== "need_approval" && (
+
+ )}
+
+
+
+