From 3b02d987648103b68aedb425c3be5200e043527d Mon Sep 17 00:00:00 2001 From: bracesproul Date: Wed, 2 Apr 2025 11:44:40 -0700 Subject: [PATCH 1/3] feat: Add docs on how to hide messages from UI --- README.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/README.md b/README.md index aa78848..0c6e996 100644 --- a/README.md +++ b/README.md @@ -47,3 +47,58 @@ Once the app is running (or if using the deployed site), you'll be prompted to e - **LangSmith API Key**: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers. After entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server. + +## Hiding Messages in the Chat + +You can control the visibility of messages within the Agent Chat UI in two main ways: + +**1. Prevent Live Streaming:** + +To stop messages from being displayed _as they stream_ from an LLM call, add the `langsmith:nostream` tag to the chat model's configuration. The UI normally uses `on_chat_model_stream` events to render streaming messages; this tag prevents those events from being emitted for the tagged model. + +_Python Example:_ + +```python +from langchain_anthropic import ChatAnthropic + +# Add tags via the .with_config method +model = ChatAnthropic().with_config( + config={"tags": ["langsmith:nostream"]} +) +``` + +_TypeScript Example:_ + +```typescript +import { ChatAnthropic } from "@langchain/anthropic"; + +const model = new ChatAnthropic() + // Add tags via the .withConfig method + .withConfig({ tags: ["langsmith:nostream"] }); +``` + +**Note:** Even if streaming is hidden this way, the message will still appear after the LLM call completes if it's saved to the graph's state without further modification. + +**2. Hide Messages Permanently:** + +To ensure a message is _never_ displayed in the chat UI (neither during streaming nor after being saved to state), prefix its `id` field with `do-not-render-` _before_ adding it to the graph's state, along with adding the `langsmith:do-not-render` tag to the chat model's configuration. The UI explicitly filters out any message whose `id` starts with this prefix. + +_Python Example:_ + +```python +result = model.invoke([messages]) +# Prefix the ID before saving to state +result.id = f"do-not-render-{result.id}" +return {"messages": [result]} +``` + +_TypeScript Example:_ + +```typescript +const result = await model.invoke([messages]); +// Prefix the ID before saving to state +result.id = `do-not-render-${result.id}`; +return { messages: [result] }; +``` + +This approach guarantees the message remains completely hidden from the user interface. From d1dcf44f320ceb7d859225b706807a70724c06d0 Mon Sep 17 00:00:00 2001 From: bracesproul Date: Wed, 2 Apr 2025 13:33:11 -0700 Subject: [PATCH 2/3] feat: Link github repo --- src/components/icons/github.tsx | 12 +++++ src/components/thread/index.tsx | 83 ++++++++++++++++++++++++--------- 2 files changed, 73 insertions(+), 22 deletions(-) create mode 100644 src/components/icons/github.tsx diff --git a/src/components/icons/github.tsx b/src/components/icons/github.tsx new file mode 100644 index 0000000..168f15c --- /dev/null +++ b/src/components/icons/github.tsx @@ -0,0 +1,12 @@ +export const GitHubSVG = ({ width = "100%", height = "100%" }) => ( + + GitHub + + +); diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx index fd46266..defaf68 100644 --- a/src/components/thread/index.tsx +++ b/src/components/thread/index.tsx @@ -20,6 +20,7 @@ import { PanelRightOpen, PanelRightClose, SquarePen, + Github, } from "lucide-react"; import { useQueryState, parseAsBoolean } from "nuqs"; import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom"; @@ -28,6 +29,13 @@ import { toast } from "sonner"; import { useMediaQuery } from "@/hooks/useMediaQuery"; import { Label } from "../ui/label"; import { Switch } from "../ui/switch"; +import { GitHubSVG } from "../icons/github"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "../ui/tooltip"; function StickyToBottomContent(props: { content: ReactNode; @@ -67,6 +75,27 @@ function ScrollToBottom(props: { className?: string }) { ); } +function OpenGitHubRepo() { + return ( + + + + + + + + +

Open GitHub repo

+ + + + ); +} + export function Thread() { const [threadId, setThreadId] = useQueryState("threadId"); const [chatHistoryOpen, setChatHistoryOpen] = useQueryState( @@ -218,19 +247,24 @@ export function Thread() { > {!chatStarted && (
- {(!chatHistoryOpen || !isLargeScreen) && ( - - )} +
+ {(!chatHistoryOpen || !isLargeScreen) && ( + + )} +
+
+ +
)} {chatStarted && ( @@ -270,15 +304,20 @@ export function Thread() { - setThreadId(null)} - > - - +
+
+ +
+ setThreadId(null)} + > + + +
From 6e220b1a48939545b5626ee45e596f3788d550ed Mon Sep 17 00:00:00 2001 From: bracesproul Date: Wed, 2 Apr 2025 13:33:57 -0700 Subject: [PATCH 3/3] cr --- src/components/thread/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx index defaf68..8ea169d 100644 --- a/src/components/thread/index.tsx +++ b/src/components/thread/index.tsx @@ -20,7 +20,6 @@ import { PanelRightOpen, PanelRightClose, SquarePen, - Github, } from "lucide-react"; import { useQueryState, parseAsBoolean } from "nuqs"; import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";