58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
import "./ui.css";
|
||
|
|
import { useStream } from "@langchain/langgraph-sdk/react";
|
||
|
|
import type { AIMessage, Message } from "@langchain/langgraph-sdk";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
function ReactComponent(props: { instruction: string; logo: string }) {
|
||
|
|
const [counter, setCounter] = useState(0);
|
||
|
|
|
||
|
|
// useStream should be able to be infered from context
|
||
|
|
const thread = useStream<{ messages: Message[] }, { messages: Message[] }>({
|
||
|
|
assistantId: "assistant_123",
|
||
|
|
apiUrl: "http://localhost:3123",
|
||
|
|
});
|
||
|
|
|
||
|
|
const aiTool = thread.messages
|
||
|
|
.slice()
|
||
|
|
.reverse()
|
||
|
|
.find(
|
||
|
|
(message): message is AIMessage =>
|
||
|
|
message.type === "ai" && !!message.tool_calls?.length
|
||
|
|
);
|
||
|
|
|
||
|
|
const toolCallId = aiTool?.tool_calls?.[0]?.id;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-2 border border-solid border-slate-500 p-4 rounded-md">
|
||
|
|
Request: {props.instruction}
|
||
|
|
<button className="text-left" onClick={() => setCounter(counter + 1)}>
|
||
|
|
Click me
|
||
|
|
</button>
|
||
|
|
<p>Counter: {counter}</p>
|
||
|
|
{toolCallId && (
|
||
|
|
<button
|
||
|
|
className="text-left"
|
||
|
|
onClick={() => {
|
||
|
|
thread.submit({
|
||
|
|
messages: [
|
||
|
|
{
|
||
|
|
type: "tool",
|
||
|
|
tool_call_id: toolCallId!,
|
||
|
|
name: "stockbroker",
|
||
|
|
content: "hey",
|
||
|
|
},
|
||
|
|
{ type: "human", content: `Buy ${counter}` },
|
||
|
|
],
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Buy
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const ComponentMap = { "react-component": ReactComponent } as const;
|
||
|
|
export default ComponentMap;
|