diff --git a/.env.example b/.env.example new file mode 100644 index 00000000..4733bcdf --- /dev/null +++ b/.env.example @@ -0,0 +1,14 @@ +# LangSmith tracing +LANGCHAIN_TRACING_V2=true +LANGCHAIN_API_KEY= + +# LLM API keys +ANTHROPIC_API_KEY= + +# Vercel KV stores. Used for system prompt storage. +KV_REST_API_URL= +KV_REST_API_TOKEN= + +# LangGraph Deployment +LANGGRAPH_API_URL= +NEXT_PUBLIC_LANGGRAPH_GRAPH_ID="agent" diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..55ec8d18 --- /dev/null +++ b/.gitignore @@ -0,0 +1,38 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# 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 +.env + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..ba08ff04 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,19 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": false, + "quoteProps": "as-needed", + "jsxSingleQuote": false, + "trailingComma": "es5", + "bracketSpacing": true, + "arrowParens": "always", + "requirePragma": false, + "insertPragma": false, + "proseWrap": "preserve", + "htmlWhitespaceSensitivity": "css", + "vueIndentScriptAndStyle": false, + "endOfLine": "lf" +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..5d8d7cda --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) LangChain, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..fb3deca6 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# Streaming Messages + +This project contains a Next.js app, with API routes to hit a LangGraph Cloud deployment and demonstrate exactly how the different streaming types work. +To change the streaming type, click on the settings (⚙️) icon in the top right corner of the app and select the desired streaming type. + +## [YouTube Video](https://youtu.be/wjn5tFbLgwA) + +## Setup + +To setup the project, install the dependencies: + +```bash +yarn install +``` + +## Environment variables + +The streaming messages project only requires your LangChain API key, the LangGraph Cloud deployment URL, and the name of your graph. + +Once you have these, create a `.env` file in this directory and add the following: + +```bash +LANGGRAPH_API_URL=http://localhost:8123 # Or your production URL +LANGCHAIN_API_KEY=YOUR_API_KEY +NEXT_PUBLIC_LANGGRAPH_GRAPH_ID=YOUR_GRAPH_ID +``` diff --git a/components.json b/components.json new file mode 100644 index 00000000..42f059b5 --- /dev/null +++ b/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} \ No newline at end of file diff --git a/langgraph.json b/langgraph.json new file mode 100644 index 00000000..c7521d63 --- /dev/null +++ b/langgraph.json @@ -0,0 +1,9 @@ +{ + "node_version": "20", + "dockerfile_lines": [], + "dependencies": ["."], + "graphs": { + "agent": "./src/agent/index.ts:buildGraph" + }, + "env": ".env" +} diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 00000000..4678774e --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 00000000..3f37e55f --- /dev/null +++ b/package.json @@ -0,0 +1,66 @@ +{ + "name": "streaming_chat_frontend", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "format": "prettier --config .prettierrc --write \"src\"" + }, + "dependencies": { + "@assistant-ui/react": "^0.5.63", + "@assistant-ui/react-langgraph": "^0.0.5", + "@assistant-ui/react-markdown": "^0.2.12", + "@assistant-ui/react-syntax-highlighter": "^0.0.11", + "@langchain/anthropic": "^0.3.1", + "@langchain/core": "^0.3.3", + "@langchain/langgraph": "^0.2.10", + "@langchain/langgraph-sdk": "^0.0.14", + "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-dialog": "^1.1.1", + "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-progress": "^1.1.0", + "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-toast": "^1.2.1", + "@radix-ui/react-tooltip": "^1.1.2", + "@supabase/supabase-js": "^2.45.4", + "@types/react-syntax-highlighter": "^15.5.13", + "@vercel/kv": "^2.0.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", + "js-cookie": "^3.0.5", + "lucide-react": "^0.441.0", + "next": "14.2.7", + "react": "^18", + "react-dom": "^18", + "react-json-view": "^1.21.3", + "react-markdown": "^9.0.1", + "react-syntax-highlighter": "^15.5.0", + "rehype-katex": "^7.0.1", + "remark-gfm": "^4.0.0", + "remark-math": "^6.0.0", + "tailwind-merge": "^2.5.2", + "tailwind-scrollbar-hide": "^1.1.7", + "tailwindcss-animate": "^1.0.7", + "uuid": "^10.0.0", + "zod": "^3.23.8" + }, + "devDependencies": { + "@types/js-cookie": "^3.0.6", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "@types/uuid": "^10.0.0", + "eslint": "^8", + "eslint-config-next": "14.2.7", + "postcss": "^8", + "prettier": "^3.3.3", + "tailwind-scrollbar": "^3.1.0", + "tailwindcss": "^3.4.1", + "typescript": "^5" + } +} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 00000000..1a69fd2a --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/public/lc_logo.jpg b/public/lc_logo.jpg new file mode 100644 index 00000000..deda5068 Binary files /dev/null and b/public/lc_logo.jpg differ diff --git a/src/agent/index.ts b/src/agent/index.ts new file mode 100644 index 00000000..6c0af345 --- /dev/null +++ b/src/agent/index.ts @@ -0,0 +1,315 @@ +import { + Annotation, + END, + LangGraphRunnableConfig, + MessagesAnnotation, + START, + StateGraph, +} from "@langchain/langgraph"; +import { z } from "zod"; +import { BaseMessage } from "@langchain/core/messages"; +import { RunnableConfig } from "@langchain/core/runnables"; +import { ChatAnthropic } from "@langchain/anthropic"; +import { DEFAULT_SYSTEM_RULES } from "../constants"; +import { getRulesFromStore, putRulesInStore } from "./utils"; + +const DEFAULT_SYSTEM_RULES_STRING = `- ${DEFAULT_SYSTEM_RULES.join("\n- ")}`; +const DEFAULT_RULES_STRING = "*no rules have been set yet*"; + +const GraphAnnotation = Annotation.Root({ + ...MessagesAnnotation.spec, + /** + * Whether or not writing content was generated in the conversation. + */ + contentGenerated: Annotation, +}); + +const GraphConfig = Annotation.Root({ + /** + * The system rules to always include when generating responses. + * This is editable by the user. + */ + systemRules: Annotation, + /** + * Whether or not the user has accepted the text generated by the AI. + * If this is true, the graph will route to a node which generates rules. + */ + hasAcceptedText: Annotation, +}); + +const RULES_PROMPT = `The user has defined two sets of rules. The first set is for style guidelines, and the second set is for content guidelines. + + +{styleRules} + + + +{contentRules} +`; + +const SYSTEM_PROMPT = `You are a helpful assistant tasked with thoughtfully fulfilling the requests of the user. + +System rules: + + +{systemRules} + + +{rulesPrompt}`; + +const callModel = async ( + state: typeof GraphAnnotation.State, + config: LangGraphRunnableConfig +) => { + const model = new ChatAnthropic({ + model: "claude-3-5-sonnet-20240620", + temperature: 0, + }); + + const { styleRules, contentRules } = await getRulesFromStore(config); + + const styleRulesString = styleRules ? `- ${styleRules.join("\n - ")}` : null; + const contentRulesString = contentRules + ? `- ${contentRules.join("\n - ")}` + : null; + + let systemPrompt = SYSTEM_PROMPT.replace( + "{systemRules}", + config?.configurable?.systemRules ?? DEFAULT_SYSTEM_RULES_STRING + ); + if (styleRulesString || contentRulesString) { + systemPrompt = systemPrompt + .replace("{rulesPrompt}", RULES_PROMPT) + .replace("{styleRules}", styleRulesString || DEFAULT_RULES_STRING) + .replace("{contentRules}", contentRulesString || DEFAULT_RULES_STRING); + } else { + systemPrompt = systemPrompt.replace("{rulesPrompt}", ""); + } + + const response = await model.invoke( + [ + { + role: "system", + content: systemPrompt, + }, + ...state.messages, + ], + config + ); + return { messages: [response] }; +}; + +const _prepareConversation = (messages: BaseMessage[]): string => { + return messages + .map((msg, i) => { + if (typeof msg.content !== "string") return ""; + return `<${msg._getType()}_message index={${i}}>\n${msg.content}\n`; + }) + .join("\n\n"); +}; + +/** + * This node generates insights based on the changes, or followup messages + * that have been made by the user. It does the following: + * 1. Sets a system message describing the task, and existing user rules, and how messages in the history can be formatted. (e.g an AI Message, followed by a human message that is prefixed with "REVISED MESSAGE"). + * 2. Passes the entire history to the LLM + * 3. Uses `withStructuredOutput` to generate structured rules based on conversation or revisions. + * 4. Updates the `userRules` shared value with the new rules. + * + * The LLM will always re-generate the entire rules list, so it is important to pass the entire history to the model. + * @param state The current state of the graph + */ +const generateInsights = async ( + state: typeof GraphAnnotation.State, + config: LangGraphRunnableConfig +) => { + const systemPrompt = `This conversation contains back and fourth between an AI assistant, and a user who is using the assistant to generate text. + +User messages which are prefixed with "REVISED MESSAGE" contain the entire revised text the user made to the assistant message directly before in the conversation. +Revisions are made directly by users, so you should pay VERY close attention to every single change made, no matter how small. These should be heavily considered when generating rules. + +Important aspects of revisions to consider: +- Deletions: What did the user remove? Do you need a rule to avoid adding this in the future? +- Tone: Did they change the overall tone? Do you need a rule to ensure this tone is maintained? +- Structure: Did they change the structure of the text? This is important to remember, as it may be a common pattern. + +There also may be additional back and fourth between the user and the assistant. + +Based on the conversation, and paying particular attention to any changes made in the "REVISED MESSAGE", your job is to create a list of rules to use in the future to help the AI assistant better generate text. + +These rules should be split into two categories: +1. Style guidelines: These rules should focus on the style, tone, and structure of the text. +2. Content guidelines: These rules should focus on the content, context, and purpose of the text. Think of this as the business logic or domain-specific rules. + +In your response, include every single rule you want the AI assistant to follow in the future. You should list rules based on a combination of the existing conversation as well as previous rules. +You can modify previous rules if you think the new conversation has helpful information, or you can delete old rules if they don't seem relevant, or you can add new rules based on the conversation. + +Refrain from adding overly generic rules like "follow instructions". These generic rules are already outlined in the "system_rules" below. +Instead, focus your attention on specific details, writing style, or other aspects of the conversation that you think are important for the AI to follow. + +The user has defined the following rules: + + +{styleRules} + + + +{contentRules} + + +Here is the conversation: + + +{conversation} + + +And here are the default system rules: + + +{systemRules} + + +Respond with updated rules to keep in mind for future conversations. Try to keep the rules you list high signal-to-noise - don't include unnecessary ones, but make sure the ones you do add are descriptive. Combine ones that seem similar and/or contradictory`; + + const { styleRules, contentRules } = await getRulesFromStore(config); + + const styleRulesString = styleRules + ? `- ${styleRules.join("\n - ")}` + : DEFAULT_RULES_STRING; + const contentRulesString = contentRules + ? `- ${contentRules.join("\n - ")}` + : DEFAULT_RULES_STRING; + + const prompt = systemPrompt + .replace( + "{systemRules}", + config.configurable?.systemRules ?? DEFAULT_SYSTEM_RULES_STRING + ) + .replace("{styleRules}", styleRulesString) + .replace("{contentRules}", contentRulesString) + .replace("{conversation}", _prepareConversation(state.messages)); + + const userRulesSchema = z.object({ + contentRules: z + .array(z.string()) + .describe( + "List of rules focusing on content, context, and purpose of the text" + ), + styleRules: z + .array(z.string()) + .describe( + "List of rules focusing on style, tone, and structure of the text" + ), + }); + + const modelWithStructuredOutput = new ChatAnthropic({ + model: "claude-3-5-sonnet-20240620", + temperature: 0, + }).withStructuredOutput(userRulesSchema, { name: "userRules" }); + + const result = await modelWithStructuredOutput.invoke( + [ + { + role: "user", + content: prompt, + }, + ], + config + ); + + await putRulesInStore(config, result); + + return { + userAcceptedText: false, + }; +}; + +const wasContentGenerated = async (state: typeof GraphAnnotation.State) => { + const { messages } = state; + + const prompt = `The following is the ending of a conversation between a user and an AI assistant. The assistant has been tasked with generating writing content (e.g a blog post, or tweet) for the user. +Carefully read the conversation and determine whether or not writing content was generated by the assistant, in the most recent assistant message. + +In some cases, the assistant is responding to a question and did not generate any content. +In other cases the assistant is generating content, or revising content. + +If the assistant is discussing content, but no actual content was generated, or included in the response, set 'contentGenerated' to false. +If the assistant generated content, set 'contentGenerated' to true. + + +{conversation} +`; + const schema = z.object({ + contentGenerated: z + .boolean() + .describe( + "Whether or not content (e.g a tweet, or blog post) was generated in the most recent assistant message." + ), + }); + + const formattedPrompt = (() => { + // Find the index of the last human message + const lastHumanMessageIndex = messages.findLastIndex( + (msg) => msg._getType() === "human" + ); + + // If a human message is found, slice the array from that index + const slicedMessages = + lastHumanMessageIndex !== -1 + ? messages.slice(lastHumanMessageIndex) + : messages; + + // Prepare the conversation with the sliced messages + return prompt.replace( + "{conversation}", + _prepareConversation(slicedMessages) + ); + })(); + + const model = new ChatAnthropic({ + model: "claude-3-haiku-20240307", + temperature: 0, + }).withStructuredOutput(schema, { name: "was_content_generated" }); + + return model.invoke([ + { + role: "user", + content: formattedPrompt, + }, + ]); +}; + +/** + * Conditional edge which is always called first. This edge + * determines whether or not revisions have been made, and if so, + * generate insights to then set under user rules. + * @param {typeof GraphAnnotation.State} state The current state of the graph + */ +const shouldGenerateInsights = ( + _state: typeof GraphAnnotation.State, + config?: RunnableConfig +) => { + const { hasAcceptedText = false } = config?.configurable ?? {}; + + if (hasAcceptedText) { + return "generateInsights"; + } + return "callModel"; +}; + +export function buildGraph() { + const workflow = new StateGraph(GraphAnnotation, GraphConfig) + .addNode("callModel", callModel) + .addNode("generateInsights", generateInsights) + .addNode("wasContentGenerated", wasContentGenerated) + // Always start by checking whether or not to generate insights + .addConditionalEdges(START, shouldGenerateInsights) + // Always check if content was generated after calling the model + .addEdge("callModel", "wasContentGenerated") + // No further action by the graph is necessary after either + // generating a response via `callModel`, or rules via `generateInsights`. + .addEdge("generateInsights", END) + .addEdge("wasContentGenerated", END); + + return workflow.compile(); +} diff --git a/src/agent/utils.ts b/src/agent/utils.ts new file mode 100644 index 00000000..1599d473 --- /dev/null +++ b/src/agent/utils.ts @@ -0,0 +1,44 @@ +import { createNamespace, USER_RULES_STORE_KEY } from "../lib/store"; +import { UserRules } from "../types"; +import { BaseStore, LangGraphRunnableConfig } from "@langchain/langgraph"; + +const validateStore = (config: LangGraphRunnableConfig): BaseStore => { + if (!config.store) { + throw new Error("Store not found in config."); + } + return config.store; +}; + +export const getRulesFromStore = async ( + config: LangGraphRunnableConfig +): Promise => { + const store = validateStore(config); + const assistantId = config.configurable?.assistant_id; + + if (!assistantId) { + throw new Error("Assistant ID not found in config."); + } + + const namespace = createNamespace(assistantId); + const rules = await store.get(namespace, USER_RULES_STORE_KEY); + + return { + styleRules: rules?.value?.styleRules ?? null, + contentRules: rules?.value?.contentRules ?? null, + }; +}; + +export const putRulesInStore = async ( + config: LangGraphRunnableConfig, + rules: UserRules +): Promise => { + const store = validateStore(config); + const assistantId = config.configurable?.assistant_id; + + if (!assistantId) { + throw new Error("Assistant ID not found in config."); + } + + const namespace = createNamespace(assistantId); + await store.put(namespace, USER_RULES_STORE_KEY, rules); +}; diff --git a/src/app/api/[..._path]/route.ts b/src/app/api/[..._path]/route.ts new file mode 100644 index 00000000..7243ee07 --- /dev/null +++ b/src/app/api/[..._path]/route.ts @@ -0,0 +1,65 @@ +import { NextRequest, NextResponse } from "next/server"; + +function getCorsHeaders() { + return { + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS", + "Access-Control-Allow-Headers": "*", + }; +} + +async function handleRequest(req: NextRequest, method: string) { + try { + const path = req.nextUrl.pathname.replace(/^\/?api\//, ""); + const url = new URL(req.url); + const searchParams = new URLSearchParams(url.search); + searchParams.delete("_path"); + searchParams.delete("nxtP_path"); + const queryString = searchParams.toString() + ? `?${searchParams.toString()}` + : ""; + + const options: RequestInit = { + method, + headers: { + "x-api-key": process.env.LANGCHAIN_API_KEY || "", + }, + }; + + if (["POST", "PUT", "PATCH"].includes(method)) { + options.body = await req.text(); + } + + const res = await fetch( + `${process.env.LANGGRAPH_API_URL}/${path}${queryString}`, + options + ); + + return new NextResponse(res.body, { + status: res.status, + statusText: res.statusText, + headers: { + ...res.headers, + ...getCorsHeaders(), + }, + }); + } catch (e: any) { + return NextResponse.json({ error: e.message }, { status: e.status ?? 500 }); + } +} + +export const GET = (req: NextRequest) => handleRequest(req, "GET"); +export const POST = (req: NextRequest) => handleRequest(req, "POST"); +export const PUT = (req: NextRequest) => handleRequest(req, "PUT"); +export const PATCH = (req: NextRequest) => handleRequest(req, "PATCH"); +export const DELETE = (req: NextRequest) => handleRequest(req, "DELETE"); + +// Add a new OPTIONS handler +export const OPTIONS = () => { + return new NextResponse(null, { + status: 204, + headers: { + ...getCorsHeaders(), + }, + }); +}; diff --git a/src/app/api/store/get/route.ts b/src/app/api/store/get/route.ts new file mode 100644 index 00000000..042e3708 --- /dev/null +++ b/src/app/api/store/get/route.ts @@ -0,0 +1,67 @@ +import { Client } from "@langchain/langgraph-sdk"; +import { NextRequest, NextResponse } from "next/server"; + +export async function GET(req: NextRequest) { + if (!process.env.LANGGRAPH_API_URL || !process.env.LANGCHAIN_API_KEY) { + return new NextResponse( + JSON.stringify({ + error: "LANGGRAPH_API_URL and LANGCHAIN_API_KEY must be set", + }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } + + const searchParams = req.nextUrl.searchParams; + const namespaceParam = searchParams.get("namespace"); + const key = searchParams.get("key"); + + if (!namespaceParam || !key) { + return new NextResponse( + JSON.stringify({ error: "Missing namespace or key" }), + { + status: 400, + headers: { "Content-Type": "application/json" }, + } + ); + } + + // Parse the namespace from URL-encoded string to an array of strings + const namespace: string = decodeURIComponent(namespaceParam); + const namespaceArr: string[] = namespace.split("."); + + if (!Array.isArray(namespaceArr)) { + return new NextResponse( + JSON.stringify({ error: "Invalid namespace format" }), + { + status: 400, + headers: { "Content-Type": "application/json" }, + } + ); + } + + const lgClient = new Client({ + apiKey: process.env.LANGCHAIN_API_KEY, + apiUrl: process.env.LANGGRAPH_API_URL, + }); + + try { + const result = await lgClient.store.getItem(namespaceArr, key); + + return new NextResponse(JSON.stringify(result ?? {}), { + headers: { "Content-Type": "application/json" }, + }); + } catch (e) { + console.error("Err fetching store"); + console.error(e); + return new NextResponse( + JSON.stringify({ error: "Failed to get item from store" }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } +} diff --git a/src/app/api/system_rules/get/route.ts b/src/app/api/system_rules/get/route.ts new file mode 100644 index 00000000..b8bf2f9f --- /dev/null +++ b/src/app/api/system_rules/get/route.ts @@ -0,0 +1,85 @@ +import { createClient } from "@supabase/supabase-js"; +import { NextRequest, NextResponse } from "next/server"; + +export async function GET(req: NextRequest) { + if ( + !process.env.SUPABASE_SERVICE_ROLE_KEY || + !process.env.NEXT_PUBLIC_SUPABASE_URL + ) { + return new NextResponse( + JSON.stringify({ + error: + "SUPABASE_SERVICE_ROLE_KEY and NEXT_PUBLIC_SUPABASE_URL must be set", + }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } + + // Initialize Supabase client + const supabase = createClient( + process.env.NEXT_PUBLIC_SUPABASE_URL, + process.env.SUPABASE_SERVICE_ROLE_KEY + ); + + const searchParams = req.nextUrl.searchParams; + const userId = searchParams.get("userId"); + const assistantId = searchParams.get("assistantId"); + + if (!userId || !assistantId) { + return new NextResponse( + JSON.stringify({ error: "Missing userId or assistantId" }), + { + status: 400, + headers: { "Content-Type": "application/json" }, + } + ); + } + + try { + // Fetch the latest system rules + const { data, error } = await supabase + .from("user_rules") + .select("system_rules") + .eq("user_id", userId) + .eq("assistant_id", assistantId) + .limit(1) + .single(); + + if (error) { + console.error("Error getting system rules:", { + error, + }); + return new NextResponse( + JSON.stringify({ error: "Failed to get system rules." }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } + + if (!data) { + return new NextResponse(JSON.stringify({ error: "No rules found" }), { + status: 404, + headers: { "Content-Type": "application/json" }, + }); + } + + return new NextResponse(JSON.stringify(data), { + status: 200, + headers: { "Content-Type": "application/json" }, + }); + } catch (error) { + console.error("Error fetching system rules:", error); + return new NextResponse( + JSON.stringify({ error: "Failed to fetch system rules" }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } +} diff --git a/src/app/api/system_rules/put/route.ts b/src/app/api/system_rules/put/route.ts new file mode 100644 index 00000000..06dbfa20 --- /dev/null +++ b/src/app/api/system_rules/put/route.ts @@ -0,0 +1,82 @@ +import { NextRequest, NextResponse } from "next/server"; +import { createClient } from "@supabase/supabase-js"; + +export async function POST(req: NextRequest) { + if ( + !process.env.SUPABASE_SERVICE_ROLE_KEY || + !process.env.NEXT_PUBLIC_SUPABASE_URL + ) { + return new NextResponse( + JSON.stringify({ + error: + "SUPABASE_SERVICE_ROLE_KEY and NEXT_PUBLIC_SUPABASE_URL must be set", + }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } + + // Initialize Supabase client + const supabase = createClient( + process.env.NEXT_PUBLIC_SUPABASE_URL, + process.env.SUPABASE_SERVICE_ROLE_KEY + ); + + const { assistantId, userId, systemRules } = await req.json(); + + if (!userId || !assistantId || !systemRules) { + return new NextResponse( + JSON.stringify({ + error: "Missing userId, assistantId, or an array of systemRules.", + }), + { + status: 400, + headers: { "Content-Type": "application/json" }, + } + ); + } + + try { + // Insert new row into user_rules table + const { data, error } = await supabase + .from("user_rules") + .upsert( + { + user_id: userId, + assistant_id: assistantId, + system_rules: systemRules, + }, + { onConflict: "user_id,assistant_id", ignoreDuplicates: false } + ) + .select(); + + if (error) { + console.error("Error inserting system rules:", { + error, + }); + return new NextResponse( + JSON.stringify({ error: "Failed to insert system rules." }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } + + return new NextResponse(JSON.stringify(data), { + status: 200, + headers: { "Content-Type": "application/json" }, + }); + } catch (error) { + console.error("Error inserting system rules:", error); + return new NextResponse( + JSON.stringify({ error: "Failed to insert system rules." }), + { + status: 500, + headers: { "Content-Type": "application/json" }, + } + ); + } +} diff --git a/src/app/favicon.ico b/src/app/favicon.ico new file mode 100644 index 00000000..18bbd3ff Binary files /dev/null and b/src/app/favicon.ico differ diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 00000000..046fb63d --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,103 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} +*::-webkit-scrollbar { + display: none; +} + +a { + color: rgb(33, 118, 246); +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 00000000..178ba72e --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Streaming UI chat", + description: "Streaming UI chat", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 00000000..45a93484 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,78 @@ +"use client"; +import { WelcomeDialog } from "@/components/WelcomeDialog"; +import { useState } from "react"; +import { useRules } from "@/hooks/useRules"; +import { GeneratedRulesDialog } from "@/components/GeneratedRulesDialog"; +import { ContentComposerChatInterface } from "@/components/ContentComposer"; +import { useGraph } from "@/hooks/useGraph"; +import { SystemRulesDialog } from "@/components/SystemRulesDialog"; +import { useUser } from "@/hooks/useUser"; +import { AssistantsDropdown } from "@/components/AssistantsDropdown"; + +export default function Home() { + const [refreshAssistants, setRefreshAssistants] = useState< + () => Promise + >(() => () => Promise.resolve()); + const { userId } = useUser(); + const { + createAssistant, + sendMessage, + streamMessage, + assistantId, + setAssistantId, + isGetAssistantsLoading, + getAssistantsByUserId, + updateAssistantMetadata, + } = useGraph({ userId, refreshAssistants }); + const { + userRules, + isLoadingUserRules, + setSystemRules, + systemRules, + setSystemRulesAndSave, + isLoadingSystemRules, + getUserRules, + } = useRules({ assistantId, userId }); + + return ( +
+ Promise) => + setRefreshAssistants(() => callback) + } + /> + + + sendMessage(params, getUserRules)} + streamMessage={streamMessage} + userId={userId} + /> + +
+ ); +} diff --git a/src/components/AssistantsDropdown.tsx b/src/components/AssistantsDropdown.tsx new file mode 100644 index 00000000..f5d83fa5 --- /dev/null +++ b/src/components/AssistantsDropdown.tsx @@ -0,0 +1,155 @@ +import { type Assistant } from "@langchain/langgraph-sdk"; +import { useCallback, useEffect, useState } from "react"; +import { cn } from "@/lib/utils"; +import { Loader } from "lucide-react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuLabel, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "./ui/dropdown-menu"; +import { Button } from "./ui/button"; +import { NewAssistantDialog } from "./NewAssistantDialog"; + +export interface AssistantsDropdownProps { + selectedAssistantId: string | undefined; + isGetAssistantsLoading: boolean; + getAssistantsByUserId: (userId: string) => Promise; + setAssistantId: (assistantId: string) => void; + userId: string | undefined; + createAssistant: ( + graphId: string, + userId: string, + extra?: { + assistantName?: string; + assistantDescription?: string; + overrideExisting?: boolean; + } + ) => Promise; + onAssistantUpdate: (callback: () => Promise) => void; +} + +export function AssistantsDropdown(props: AssistantsDropdownProps) { + const [assistants, setAssistants] = useState([]); + const [selectedAssistant, setSelectedAssistant] = useState( + null + ); + const [isLoading, setIsLoading] = useState(true); + + const fetchAssistants = useCallback(async () => { + if (!props.userId || !props.selectedAssistantId) return; + setIsLoading(true); + let assistants = await props.getAssistantsByUserId(props.userId); + if (props.selectedAssistantId) { + const currentSelectedAssistant = assistants.find( + (a) => a.assistant_id === props.selectedAssistantId + ); + + if (currentSelectedAssistant) { + const otherAssistants = assistants.filter( + (a) => a.assistant_id !== props.selectedAssistantId + ); + assistants = [currentSelectedAssistant, ...otherAssistants]; + setSelectedAssistant(currentSelectedAssistant); + } + } + setAssistants(assistants); + setIsLoading(false); + }, [props.userId, props.selectedAssistantId]); + + useEffect(() => { + if (!props.userId || assistants.length > 0) { + setIsLoading(false); + } + void fetchAssistants(); + }, [props.userId, props.selectedAssistantId, assistants.length]); + + useEffect(() => { + props.onAssistantUpdate(fetchAssistants); + }, [props.onAssistantUpdate]); + + const handleChangeAssistant = (assistantId: string) => { + if (assistantId === props.selectedAssistantId) return; + + props.setAssistantId(assistantId); + // Force page reload + window.location.reload(); + }; + + const defaultButtonValue = isLoading ? ( +

+ Loading assistants + +

+ ) : ( + "Select assistant" + ); + + return ( +
+ + + + + + Assistants + + + {props.isGetAssistantsLoading ? ( +

+ Fetching assistants + +

+ ) : assistants.length ? ( + assistants.map((assistant, idx) => { + const assistantName = + (assistant.metadata?.assistantName as string | undefined) || + `My assistant ${idx + 1}`; + const assistantDescription = assistant.metadata + ?.assistantDescription as string | undefined; + return ( + +
+

{assistantName}

+ {assistantDescription && ( +

+ {assistantDescription} +

+ )} +
+ + ); + }) + ) : ( +

+ No assistants found. Please create one. +

+ )} + + + + + + + +
+ ); +} diff --git a/src/components/ContentComposer.tsx b/src/components/ContentComposer.tsx new file mode 100644 index 00000000..e5b2b3c1 --- /dev/null +++ b/src/components/ContentComposer.tsx @@ -0,0 +1,212 @@ +"use client"; + +import React, { useState } from "react"; +import { + AppendMessage, + AssistantRuntimeProvider, + useExternalStoreRuntime, +} from "@assistant-ui/react"; +import { v4 as uuidv4 } from "uuid"; +import { MyThread } from "./Primitives"; +import { processStream } from "@/lib/process_event"; +import { useExternalMessageConverter } from "@assistant-ui/react"; +import { AIMessage, BaseMessage, HumanMessage } from "@langchain/core/messages"; +import { + convertLangchainMessages, + convertToOpenAIFormat, +} from "@/lib/convert_messages"; +import { GraphInput } from "@/hooks/useGraph"; +import { Toaster } from "./ui/toaster"; +import { useToast } from "@/hooks/use-toast"; +import { Loader } from "lucide-react"; +import { type Assistant } from "@langchain/langgraph-sdk"; + +export interface ContentComposerChatInterfaceProps { + systemRules: string | undefined; + streamMessage: (params: GraphInput) => Promise< + AsyncGenerator< + { + event: string; + data: any; + }, + any, + unknown + > + >; + sendMessage: (params: GraphInput) => Promise>; + createAssistant: ( + graphId: string, + userId: string, + extra?: { + assistantName?: string; + assistantDescription?: string; + overrideExisting?: boolean; + } + ) => Promise; + userId: string | undefined; +} + +export function ContentComposerChatInterface( + props: ContentComposerChatInterfaceProps +): React.ReactElement { + const { systemRules, streamMessage, sendMessage } = props; + // Only messages which are rendered in the UI. This mainly excludes revised messages. + const [renderedMessages, setRenderedMessages] = useState([]); + // Messages which contain revisions are not rendered. + const [allMessages, setAllMessages] = useState([]); + const [isRunning, setIsRunning] = useState(false); + // Use this state field to determine whether or not to generate insights. + const [contentGenerated, setContentGenerated] = useState(false); + const { toast } = useToast(); + + async function onNew(message: AppendMessage): Promise { + if (message.content[0]?.type !== "text") { + throw new Error("Only text messages are supported"); + } + setIsRunning(true); + + try { + const humanMessage = new HumanMessage({ + content: message.content[0].text, + id: uuidv4(), + }); + const currentConversation = [...renderedMessages, humanMessage]; + + setRenderedMessages(currentConversation); + setAllMessages((prevMessages) => [...prevMessages, humanMessage]); + + const response = await streamMessage({ + messages: currentConversation.map(convertToOpenAIFormat), + hasAcceptedText: false, + contentGenerated, + systemRules, + }); + + const fullMessage = await processStream(response, { + setRenderedMessages, + setContentGenerated, + }); + setAllMessages((prevMessages) => [...prevMessages, fullMessage]); + } catch (error) { + console.error("Error running message:", error); + } finally { + setIsRunning(false); + } + } + + /** + * Handle updating the state values for `renderedMessages` as well as + * `allMessages` when a message is edited. Then, trigger a new request + * passing `hasAcceptedText` as true to the API so that rules are generated. + * Since we're only making the request to generate rules, we don't need to + * update the rendered messages with the response. + */ + const onEdit = async (message: AppendMessage): Promise => { + if (message.content[0]?.type !== "text") { + throw new Error("Only text messages are supported"); + } + // Create a new assistant message with the revision + const newMessage = new AIMessage({ + content: message.content[0].text, + id: uuidv4(), + }); + const revisedMessage = new HumanMessage({ + id: newMessage.id, + content: `REVISED MESSAGE:\n${newMessage.content}`, + }); + + const indexOfMessage = Number(message.parentId) + 1; + + // Updates the rendered message with the revised message + setRenderedMessages((prevMessages) => [ + ...prevMessages.slice(0, indexOfMessage), + newMessage, + ...prevMessages.slice(indexOfMessage + 1), + ]); + + const currentConversation: BaseMessage[] = [ + ...allMessages.slice(0, indexOfMessage + 1), + revisedMessage, + ...allMessages.slice(indexOfMessage + 1), + ]; + // Insert the revised message directly after the original in the conversation history + setAllMessages((prevMessages) => [ + ...prevMessages.slice(0, indexOfMessage + 1), + revisedMessage, + ...prevMessages.slice(indexOfMessage + 1), + ]); + + // Do not generate insights if content hasn't been generated + if (!contentGenerated) return; + + try { + toast({ + description: ( +

+ Generating rules + +

+ ), + duration: 10000, + }); + await sendMessage({ + messages: currentConversation.map(convertToOpenAIFormat), + hasAcceptedText: true, + contentGenerated: true, + systemRules, + }); + toast({ + title: "Successfully generated rules ✅", + duration: 2500, + }); + } catch (error) { + console.error("Error editing message:", error); + } + }; + + const threadMessages = useExternalMessageConverter({ + callback: convertLangchainMessages, + messages: renderedMessages, + isRunning, + }); + + const runtime = useExternalStoreRuntime({ + messages: threadMessages, + isRunning, + onNew, + onEdit, + }); + + return ( +
+ + { + // Do not generate insights if content hasn't been generated + if (!contentGenerated) return; + toast({ + description: ( +

+ Generating rules + +

+ ), + duration: 10000, + }); + await sendMessage({ + messages: allMessages.map(convertToOpenAIFormat), + hasAcceptedText: true, + contentGenerated: true, + systemRules, + }); + toast({ + title: "Successfully generated rules ✅", + duration: 2500, + }); + }} + /> + + +
+ ); +} diff --git a/src/components/GeneratedRulesDialog.tsx b/src/components/GeneratedRulesDialog.tsx new file mode 100644 index 00000000..dbf181fe --- /dev/null +++ b/src/components/GeneratedRulesDialog.tsx @@ -0,0 +1,110 @@ +import { useState } from "react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogTrigger, +} from "./ui/dialog"; +import { Button } from "./ui/button"; +import { Loader } from "lucide-react"; +import { UserRules } from "@/types"; + +export interface GeneratedRulesProps { + isLoadingUserRules: boolean; + userRules: UserRules | undefined; +} + +export function GeneratedRulesDialog(props: GeneratedRulesProps) { + const { userRules, isLoadingUserRules } = props; + const [open, setOpen] = useState(false); + + return ( + + +
setOpen(true)} + className="fixed top-4 right-36 bg-black hover:bg-gray-800 text-white px-4 py-2 rounded-md shadow-sm transition-colors duration-200 cursor-pointer flex items-center space-x-2" + > +

Generated Rules

+
+ + + + + Generated Rules + + + {isLoadingUserRules + ? "Loading rules..." + : userRules?.contentRules || userRules?.styleRules + ? "Current rules generated by the assistant for content generation." + : "No rules have been generated yet. Follow the steps below to generate rules."} + + +
+ {isLoadingUserRules ? ( +
+ +
+ ) : userRules?.contentRules || userRules?.styleRules ? ( + <> + {userRules.styleRules && ( +
+

+ Style Rules: +

+
    + {userRules.styleRules.map((rule, index) => ( +
  • + {rule} +
    • + ))} +
+
+ )} + {userRules.contentRules && ( +
+

+ Content Rules: +

+
    + {userRules.contentRules.map((rule, index) => ( +
  • + {rule} +
    • + ))} +
+
+ )} + + ) : ( +
+

To generate rules:

+
    +
  1. Ask the assistant to generate some writing content
    2. +
  2. Revise & save, or copy the generated content
    3. +
  3. This will trigger rule generation
    4. +
+

+ Once rules are generated, they will appear here.{" "} + + (You may need to refresh the page first) + +

+
+ )} +
+
+ +
+ + + ); +} diff --git a/src/components/NewAssistantDialog.tsx b/src/components/NewAssistantDialog.tsx new file mode 100644 index 00000000..26c32043 --- /dev/null +++ b/src/components/NewAssistantDialog.tsx @@ -0,0 +1,116 @@ +import { useState } from "react"; +import { Button } from "./ui/button"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "./ui/dialog"; +import { PlusCircleIcon, Loader } from "lucide-react"; +import { Input } from "./ui/input"; +import { Textarea } from "./ui/textarea"; +import { type Assistant } from "@langchain/langgraph-sdk"; + +export interface NewAssistantDialogProps { + createAssistant: ( + graphId: string, + userId: string, + extra?: { + assistantName?: string; + assistantDescription?: string; + overrideExisting?: boolean; + } + ) => Promise; + userId: string | undefined; +} + +export function NewAssistantDialog(props: NewAssistantDialogProps) { + const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [name, setName] = useState(""); + const [description, setDescription] = useState(""); + + const handleCreateNewAssistant = async ( + e: React.FormEvent + ) => { + e.preventDefault(); + if (!props.userId) { + throw new Error("User ID is required"); + } + setIsLoading(true); + await props.createAssistant( + process.env.NEXT_PUBLIC_LANGGRAPH_GRAPH_ID ?? "", + props.userId, + { + assistantName: name, + assistantDescription: description, + overrideExisting: true, + } + ); + // Force page reload + window.location.reload(); + }; + + return ( + + +

setOpen(true)} + > + Create assistant + +

+ + + + + Create a new assistant + + +
+
+ + setName(e.target.value)} + placeholder="Tweet writer" + className="w-full" + /> +
+
+ +