mirror of
https://github.com/langchain-ai/langserve.git
synced 2026-07-01 20:14:01 -04:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Eugene Yurtsev
|
2036ca5198 | ||
|
Eugene Yurtsev
|
3a5d9732d8 | ||
|
Eugene Yurtsev
|
d87c0113cb | ||
|
Tat Dat Duong
|
f9ca27eec1 | ||
|
Tat Dat Duong
|
a12603f6ef | ||
|
Tat Dat Duong
|
a4845bb7c0 | ||
|
Tat Dat Duong
|
2e1426e7cf | ||
|
Tat Dat Duong
|
d39a361a52 | ||
|
Tat Dat Duong
|
830afe2839 |
@@ -7,6 +7,7 @@ from fastapi import FastAPI
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from langchain.document_loaders.blob_loaders import Blob
|
||||
from langchain.document_loaders.parsers.pdf import PDFMinerParser
|
||||
from langchain.schema.messages import BaseMessage, ChatMessage
|
||||
from langchain.schema.runnable import RunnableLambda
|
||||
from pydantic import BaseModel, Field
|
||||
|
||||
@@ -39,6 +40,14 @@ class ChatHistory(BaseModel):
|
||||
question: str
|
||||
|
||||
|
||||
class ChatHistoryMessage(BaseModel):
|
||||
chat_history: List[BaseMessage] = Field(
|
||||
...,
|
||||
extra={"widget": {"type": "chat", "input": "question", "output": ""}},
|
||||
)
|
||||
question: str
|
||||
|
||||
|
||||
class FileProcessingRequest(BaseModel):
|
||||
file: bytes = Field(..., extra={"widget": {"type": "base64file"}})
|
||||
num_chars: int = 100
|
||||
@@ -52,6 +61,11 @@ def chat_with_bot(input: Dict[str, Any]) -> Dict[str, Any]:
|
||||
}
|
||||
|
||||
|
||||
def chat_message_bot(input: Dict[str, Any]) -> BaseMessage:
|
||||
"""Bot that repeats the question twice."""
|
||||
return ChatMessage(content=f"Hello: {input['question']}", role="example")
|
||||
|
||||
|
||||
def process_file(input: Dict[str, Any]) -> str:
|
||||
"""Extract the text from the first page of the PDF."""
|
||||
content = base64.decodebytes(input["file"])
|
||||
@@ -75,6 +89,13 @@ add_routes(
|
||||
path="/pdf",
|
||||
)
|
||||
|
||||
add_routes(
|
||||
app,
|
||||
RunnableLambda(chat_message_bot).with_types(input_type=ChatHistoryMessage),
|
||||
config_keys=["configurable"],
|
||||
path="/chat_message",
|
||||
)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+52
-52
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -5,8 +5,8 @@
|
||||
<link rel="icon" href="/____LANGSERVE_BASE_URL/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Playground</title>
|
||||
<script type="module" crossorigin src="/____LANGSERVE_BASE_URL/assets/index-ea49ff70.js"></script>
|
||||
<link rel="stylesheet" href="/____LANGSERVE_BASE_URL/assets/index-244b2b9b.css">
|
||||
<script type="module" crossorigin src="/____LANGSERVE_BASE_URL/assets/index-e28f402e.js"></script>
|
||||
<link rel="stylesheet" href="/____LANGSERVE_BASE_URL/assets/index-56e0e530.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+200
-161
@@ -40,7 +40,11 @@ import {
|
||||
InputControl,
|
||||
} from "@jsonforms/vanilla-renderers";
|
||||
import { useSchemas } from "./useSchemas";
|
||||
import { useStreamLog } from "./useStreamLog";
|
||||
import {
|
||||
useStreamLog,
|
||||
} from "./useStreamLog";
|
||||
import { StreamCallback } from "./types";
|
||||
import { AppCallbackContext } from "./useStreamCallback";
|
||||
import {
|
||||
JsonFormsCore,
|
||||
RankedTester,
|
||||
@@ -169,8 +173,32 @@ function App() {
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [schemas.config]);
|
||||
|
||||
// callbacks handling
|
||||
const callbacks = useRef<{
|
||||
onStart: Exclude<StreamCallback["onStart"], undefined>[];
|
||||
onSuccess: Exclude<StreamCallback["onSuccess"], undefined>[];
|
||||
onError: Exclude<StreamCallback["onError"], undefined>[];
|
||||
}>({ onStart: [], onSuccess: [], onError: [] });
|
||||
|
||||
// the runner
|
||||
const { startStream, stopStream, latest } = useStreamLog();
|
||||
const { startStream, stopStream, latest } = useStreamLog({
|
||||
onStart(...args) {
|
||||
for (const callback of callbacks.current.onStart) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
onSuccess(...args) {
|
||||
for (const callback of callbacks.current.onSuccess) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
onError(...args) {
|
||||
for (const callback of callbacks.current.onError) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
window.parent?.postMessage({ type: "init" }, "*");
|
||||
@@ -237,196 +265,207 @@ function App() {
|
||||
});
|
||||
}, []);
|
||||
|
||||
const isSendDisabled =
|
||||
!stopStream &&
|
||||
(!!inputData.errors?.length || !!configData.errors?.length)
|
||||
const isSendDisabled =
|
||||
!stopStream && (!!inputData.errors?.length || !!configData.errors?.length);
|
||||
|
||||
if (!schemas.config || !schemas.input) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center flex-col text-ls-black bg-gradient-to-b from-[#F9FAFB] to-[#EFF8FF] min-h-[100dvh] dark:from-[#0C111C] dark:to-[#0C111C]">
|
||||
<div className="flex flex-col flex-grow gap-4 px-4 pt-6 max-w-[800px] w-full">
|
||||
<h1 className="text-2xl text-left">
|
||||
<strong>🦜 LangServe</strong> Playground
|
||||
</h1>
|
||||
{Object.keys(schemas.config).length > 0 && (
|
||||
<div className="flex flex-col gap-3 [&:has(.content>.vertical-layout:first-child:last-child:empty)]:hidden">
|
||||
{!isIframe && <h2 className="text-xl font-semibold">Configure</h2>}
|
||||
<AppCallbackContext.Provider value={callbacks}>
|
||||
<div className="flex items-center flex-col text-ls-black bg-gradient-to-b from-[#F9FAFB] to-[#EFF8FF] min-h-[100dvh] dark:from-[#0C111C] dark:to-[#0C111C]">
|
||||
<div className="flex flex-col flex-grow gap-4 px-4 pt-6 max-w-[800px] w-full">
|
||||
<h1 className="text-2xl text-left">
|
||||
<strong>🦜 LangServe</strong> Playground
|
||||
</h1>
|
||||
|
||||
<div className="content flex flex-col gap-3">
|
||||
<JsonForms
|
||||
schema={schemas.config}
|
||||
data={configData.data}
|
||||
renderers={renderers}
|
||||
cells={cells}
|
||||
onChange={({ data, errors }) =>
|
||||
data
|
||||
? setConfigData({ data, errors, defaults: false })
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{Object.keys(schemas.config).length > 0 && (
|
||||
<div className="flex flex-col gap-3 [&:has(.content>.vertical-layout:first-child:last-child:empty)]:hidden">
|
||||
{!isIframe && (
|
||||
<h2 className="text-xl font-semibold">Configure</h2>
|
||||
)}
|
||||
|
||||
{!!configData.errors?.length && configData.data && (
|
||||
<div className="bg-background rounded-xl">
|
||||
<div className="content flex flex-col gap-3">
|
||||
<JsonForms
|
||||
schema={schemas.config}
|
||||
data={configData.data}
|
||||
renderers={renderers}
|
||||
cells={cells}
|
||||
onChange={({ data, errors }) =>
|
||||
data
|
||||
? setConfigData({ data, errors, defaults: false })
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
|
||||
{!!configData.errors?.length && configData.data && (
|
||||
<div className="bg-background rounded-xl">
|
||||
<div className="bg-red-500/10 text-red-700 dark:text-red-300 rounded-xl p-3">
|
||||
<strong className="font-bold">Validation Errors</strong>
|
||||
<ul className="list-disc pl-5">
|
||||
{configData.errors?.map((e, i) => (
|
||||
<li key={i}>{e.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isIframe && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-xl font-semibold">Try it</h2>
|
||||
|
||||
<div className="p-4 border border-divider-700 flex flex-col gap-3 rounded-2xl bg-background">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-medium">Inputs</h3>
|
||||
{isInputResetable && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm px-1 -mr-1 py-0.5 rounded-md hover:bg-divider-500/50 active:bg-divider-500 text-ls-gray-100"
|
||||
onClick={() =>
|
||||
setInputData({
|
||||
data: defaults(schemas.input),
|
||||
errors: [],
|
||||
})
|
||||
}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<JsonForms
|
||||
schema={schemas.input}
|
||||
data={inputData.data}
|
||||
renderers={renderers}
|
||||
cells={cells}
|
||||
onChange={({ data, errors }) =>
|
||||
setInputData({ data, errors })
|
||||
}
|
||||
/>
|
||||
{!!inputData.errors?.length && inputData.data && (
|
||||
<div className="bg-red-500/10 text-red-700 dark:text-red-300 rounded-xl p-3">
|
||||
<strong className="font-bold">Validation Errors</strong>
|
||||
<ul className="list-disc pl-5">
|
||||
{configData.errors?.map((e, i) => (
|
||||
{inputData.errors?.map((e, i) => (
|
||||
<li key={i}>{e.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isIframe && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-xl font-semibold">Try it</h2>
|
||||
|
||||
<div className="p-4 border border-divider-700 flex flex-col gap-3 rounded-2xl bg-background">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-medium">Inputs</h3>
|
||||
{isInputResetable && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm px-1 -mr-1 py-0.5 rounded-md hover:bg-divider-500/50 active:bg-divider-500 text-ls-gray-100"
|
||||
onClick={() =>
|
||||
setInputData({
|
||||
data: defaults(schemas.input),
|
||||
errors: [],
|
||||
})
|
||||
}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<JsonForms
|
||||
schema={schemas.input}
|
||||
data={inputData.data}
|
||||
renderers={renderers}
|
||||
cells={cells}
|
||||
onChange={({ data, errors }) => setInputData({ data, errors })}
|
||||
/>
|
||||
{!!inputData.errors?.length && inputData.data && (
|
||||
<div className="bg-red-500/10 text-red-700 dark:text-red-300 rounded-xl p-3">
|
||||
<strong className="font-bold">Validation Errors</strong>
|
||||
<ul className="list-disc pl-5">
|
||||
{inputData.errors?.map((e, i) => (
|
||||
<li key={i}>{e.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
{latest && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-xl font-semibold">Output</h2>
|
||||
<div className="p-4 border border-divider-700 flex flex-col gap-3 rounded-2xl bg-background text-lg">
|
||||
<StreamOutput streamed={latest.streamed_output} />
|
||||
</div>
|
||||
<IntermediateSteps latest={latest} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{latest && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-xl font-semibold">Output</h2>
|
||||
<div className="p-4 border border-divider-700 flex flex-col gap-3 rounded-2xl bg-background text-lg">
|
||||
<StreamOutput streamed={latest.streamed_output} />
|
||||
</div>
|
||||
<IntermediateSteps latest={latest} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow md:hidden" />
|
||||
|
||||
<div className="flex-grow md:hidden" />
|
||||
<div className="gap-4 grid grid-cols-2 sticky -mx-4 px-4 py-4 bottom-0 bg-background md:static md:bg-transparent">
|
||||
<div className="md:hidden absolute inset-x-0 bottom-full h-5 bg-gradient-to-t from-black/5 to-black/0" />
|
||||
|
||||
<div className="gap-4 grid grid-cols-2 sticky -mx-4 px-4 py-4 bottom-0 bg-background md:static md:bg-transparent">
|
||||
<div className="md:hidden absolute inset-x-0 bottom-full h-5 bg-gradient-to-t from-black/5 to-black/0" />
|
||||
|
||||
{isIframe ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-3 gap-3 font-medium border border-divider-700 rounded-full flex items-center justify-center hover:bg-divider-500/50 active:bg-divider-500 transition-colors"
|
||||
onClick={() =>
|
||||
window.parent?.postMessage({ type: "close" }, "*")
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-3 gap-3 font-medium border border-transparent rounded-full flex items-center justify-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
onClick={() => {
|
||||
const hash = compressToEncodedURIComponent(
|
||||
JSON.stringify(configData.data)
|
||||
);
|
||||
|
||||
const state = getStateFromUrl(window.location.href);
|
||||
const targetUrl = `${state.basePath}/c/${hash}`;
|
||||
window.parent?.postMessage(
|
||||
{
|
||||
type: "apply",
|
||||
value: { targetUrl, config: configData.data },
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<span className="text-white">Apply</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShareDialog config={configData.data}>
|
||||
{isIframe ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-3 gap-3 font-medium border border-divider-700 rounded-full flex items-center justify-center hover:bg-divider-500/50 active:bg-divider-500 transition-colors"
|
||||
onClick={() =>
|
||||
window.parent?.postMessage({ type: "close" }, "*")
|
||||
}
|
||||
>
|
||||
<ShareIcon className="flex-shrink-0" /> <span>Share</span>
|
||||
Cancel
|
||||
</button>
|
||||
</ShareDialog>
|
||||
<button
|
||||
type="button"
|
||||
className={cn("px-4 py-3 gap-3 font-medium border border-transparent rounded-full flex items-center justify-center bg-blue-500 disabled:opacity-50 transition-colors", !isSendDisabled ? "hover:bg-blue-600 active:bg-blue-700" : "")}
|
||||
onClick={onSubmit}
|
||||
disabled={isSendDisabled}
|
||||
>
|
||||
{stopStream ? (
|
||||
<>
|
||||
<div role="status">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-5 h-5 animate-spin text-white fill-ls-blue"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
<span className="text-white">Stop</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendIcon className="flex-shrink-0" />
|
||||
<span className="text-white">Start</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-3 gap-3 font-medium border border-transparent rounded-full flex items-center justify-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
onClick={() => {
|
||||
const hash = compressToEncodedURIComponent(
|
||||
JSON.stringify(configData.data)
|
||||
);
|
||||
|
||||
const state = getStateFromUrl(window.location.href);
|
||||
const targetUrl = `${state.basePath}/c/${hash}`;
|
||||
window.parent?.postMessage(
|
||||
{
|
||||
type: "apply",
|
||||
value: { targetUrl, config: configData.data },
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<span className="text-white">Apply</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShareDialog config={configData.data}>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-3 gap-3 font-medium border border-divider-700 rounded-full flex items-center justify-center hover:bg-divider-500/50 active:bg-divider-500 transition-colors"
|
||||
>
|
||||
<ShareIcon className="flex-shrink-0" /> <span>Share</span>
|
||||
</button>
|
||||
</ShareDialog>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"px-4 py-3 gap-3 font-medium border border-transparent rounded-full flex items-center justify-center bg-blue-500 disabled:opacity-50 transition-colors",
|
||||
!isSendDisabled
|
||||
? "hover:bg-blue-600 active:bg-blue-700"
|
||||
: ""
|
||||
)}
|
||||
onClick={onSubmit}
|
||||
disabled={isSendDisabled}
|
||||
>
|
||||
{stopStream ? (
|
||||
<>
|
||||
<div role="status">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-5 h-5 animate-spin text-white fill-ls-blue"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
<span className="text-white">Stop</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendIcon className="flex-shrink-0" />
|
||||
<span className="text-white">Start</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppCallbackContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
} from "@jsonforms/core";
|
||||
import { AutosizeTextarea } from "./AutosizeTextarea";
|
||||
import { isJsonSchemaExtra } from "../utils/schema";
|
||||
import { useStreamCallback } from "../useStreamCallback";
|
||||
import { traverseNaiveJsonPath } from "../utils/path";
|
||||
|
||||
type MessageTuple = [string, string];
|
||||
|
||||
@@ -46,6 +48,16 @@ export const ChatMessageTuplesControlRenderer = withJsonFormsControlProps(
|
||||
(props) => {
|
||||
const data: Array<MessageTuple> = props.data ?? [];
|
||||
|
||||
useStreamCallback("onSuccess", (ctx) => {
|
||||
if (!isJsonSchemaExtra(props.schema)) return;
|
||||
const widget = props.schema.extra.widget;
|
||||
if (!("input" in widget) || !("output" in widget)) return;
|
||||
|
||||
const human = traverseNaiveJsonPath(ctx.input, widget.input);
|
||||
const ai = traverseNaiveJsonPath(ctx.output, widget.output);
|
||||
props.handleChange(props.path, [...data, [human, ai]]);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="control">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -54,57 +66,59 @@ export const ChatMessageTuplesControlRenderer = withJsonFormsControlProps(
|
||||
</label>
|
||||
<button
|
||||
className="p-1 rounded-full"
|
||||
onClick={() => {
|
||||
const lastRole = data.length ? data[data.length - 1][0] : "ai";
|
||||
props.handleChange(props.path, [
|
||||
...data,
|
||||
[lastRole === "ai" ? "human" : "ai", ""],
|
||||
]);
|
||||
}}
|
||||
onClick={() => props.handleChange(props.path, [...data, ["", ""]])}
|
||||
>
|
||||
<PlusIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 mt-1 empty:hidden">
|
||||
{data.map(([type, content], index) => {
|
||||
{data.map(([human, ai], index) => {
|
||||
const msgPath = Paths.compose(props.path, `${index}`);
|
||||
return (
|
||||
<div className="control group" key={index}>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<select
|
||||
className="-ml-1 min-w-[100px]"
|
||||
value={type}
|
||||
onChange={(e) => {
|
||||
props.handleChange(
|
||||
Paths.compose(msgPath, "0"),
|
||||
e.target.value
|
||||
);
|
||||
}}
|
||||
>
|
||||
<option value="human">Human</option>
|
||||
<option value="ai">AI</option>
|
||||
<option value="system">System</option>
|
||||
</select>
|
||||
<button
|
||||
className="p-1 border rounded opacity-0 transition-opacity border-divider-700 group-focus-within:opacity-100 group-hover:opacity-100"
|
||||
onClick={() => {
|
||||
props.handleChange(
|
||||
props.path,
|
||||
data.filter((_, i) => i !== index)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="control group relative" key={index}>
|
||||
<div className="grid gap-3 md:grid-cols-[1fr,auto,1fr]">
|
||||
<div className="flex-grow">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="text-xs uppercase font-semibold text-ls-gray-100 mb-1 ">
|
||||
Human
|
||||
</div>
|
||||
</div>
|
||||
<AutosizeTextarea
|
||||
value={human}
|
||||
onChange={(human) => {
|
||||
props.handleChange(Paths.compose(msgPath, "0"), human);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-shrink-0 h-px md:w-px md:h-auto bg-divider-700" />
|
||||
<div className="flex-grow">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="text-xs uppercase font-semibold text-ls-gray-100 mb-1 ">
|
||||
AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AutosizeTextarea
|
||||
value={ai}
|
||||
onChange={(ai) => {
|
||||
props.handleChange(Paths.compose(msgPath, "1"), ai);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AutosizeTextarea
|
||||
value={content}
|
||||
onChange={(content) => {
|
||||
props.handleChange(Paths.compose(msgPath, "1"), content);
|
||||
<button
|
||||
className="absolute right-3 top-3 p-1 border rounded opacity-0 transition-opacity border-divider-700 group-focus-within:opacity-100 group-hover:opacity-100"
|
||||
onClick={() => {
|
||||
props.handleChange(
|
||||
props.path,
|
||||
data.filter((_, i) => i !== index)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -9,6 +9,9 @@ import {
|
||||
isControl,
|
||||
} from "@jsonforms/core";
|
||||
import { AutosizeTextarea } from "./AutosizeTextarea";
|
||||
import { useStreamCallback } from "../useStreamCallback";
|
||||
import { traverseNaiveJsonPath } from "../utils/path";
|
||||
import { isJsonSchemaExtra } from "../utils/schema";
|
||||
|
||||
export const chatMessagesTester = rankWith(
|
||||
12,
|
||||
@@ -64,10 +67,55 @@ interface MessageFields {
|
||||
role?: string;
|
||||
}
|
||||
|
||||
function isMessageFields(x: unknown): x is MessageFields {
|
||||
if (typeof x !== "object" || x == null) return false;
|
||||
if (!("content" in x) || typeof x.content !== "string") return false;
|
||||
if (
|
||||
"additional_kwargs" in x &&
|
||||
typeof x.additional_kwargs !== "object" &&
|
||||
x.additional_kwargs != null
|
||||
)
|
||||
return false;
|
||||
if ("name" in x && typeof x.name !== "string" && x.name != null) return false;
|
||||
if ("type" in x && typeof x.type !== "string" && x.type != null) return false;
|
||||
if ("role" in x && typeof x.role !== "string" && x.role != null) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function constructMessage(
|
||||
x: unknown,
|
||||
assumedRole: string
|
||||
): MessageFields | null {
|
||||
if (typeof x === "string") {
|
||||
return { content: x, type: assumedRole };
|
||||
}
|
||||
|
||||
if (isMessageFields(x)) {
|
||||
return x;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export const ChatMessagesControlRenderer = withJsonFormsControlProps(
|
||||
(props) => {
|
||||
const data: Array<MessageFields> = props.data ?? [];
|
||||
|
||||
useStreamCallback("onSuccess", (ctx) => {
|
||||
if (!isJsonSchemaExtra(props.schema)) return;
|
||||
const widget = props.schema.extra.widget;
|
||||
if (!("input" in widget) || !("output" in widget)) return;
|
||||
|
||||
const human = traverseNaiveJsonPath(ctx.input, widget.input);
|
||||
const ai = traverseNaiveJsonPath(ctx.output, widget.output);
|
||||
|
||||
const humanMsg = constructMessage(human, "human");
|
||||
const aiMsg = constructMessage(ai, "ai");
|
||||
|
||||
if (humanMsg != null && aiMsg != null) {
|
||||
props.handleChange(props.path, [...data, humanMsg, aiMsg]);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="control">
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
export interface StreamCallback {
|
||||
onSuccess?: (ctx: { input: unknown; output: unknown }) => void;
|
||||
onError?: () => void;
|
||||
onStart?: (ctx: { input: unknown }) => void;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import {
|
||||
MutableRefObject,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
} from "react";
|
||||
|
||||
import { StreamCallback } from "./types";
|
||||
|
||||
export const AppCallbackContext = createContext<MutableRefObject<{
|
||||
onStart: Exclude<StreamCallback["onStart"], undefined>[];
|
||||
onSuccess: Exclude<StreamCallback["onSuccess"], undefined>[];
|
||||
onError: Exclude<StreamCallback["onError"], undefined>[];
|
||||
}> | null>(null);
|
||||
|
||||
export function useStreamCallback<
|
||||
Type extends "onStart" | "onSuccess" | "onError"
|
||||
>(type: Type, callback: Exclude<StreamCallback[Type], undefined>) {
|
||||
type CallbackType = Exclude<StreamCallback[Type], undefined>;
|
||||
|
||||
const appCbRef = useContext(AppCallbackContext);
|
||||
|
||||
const callbackRef = useRef<CallbackType>(callback);
|
||||
callbackRef.current = callback;
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-expect-error Not sure why I can't expand the tuple
|
||||
const current = (...args) => callbackRef.current?.(...args);
|
||||
appCbRef?.current[type].push(current);
|
||||
|
||||
return () => {
|
||||
if (!appCbRef) return;
|
||||
|
||||
// @ts-expect-error Assingability issues due to the tuple object
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
appCbRef.current[type] = appCbRef.current[type].filter(
|
||||
(callbacks) => callbacks !== current
|
||||
);
|
||||
};
|
||||
}, [type, appCbRef]);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useCallback, useReducer, useState } from "react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { applyPatch, Operation } from "fast-json-patch";
|
||||
import { fetchEventSource } from "@microsoft/fetch-event-source";
|
||||
import { resolveApiUrl } from "./utils/url";
|
||||
import { StreamCallback } from "./types";
|
||||
|
||||
export interface LogEntry {
|
||||
// ID of the sub-run.
|
||||
@@ -44,13 +45,26 @@ function reducer(state: RunState | null, action: Operation[]) {
|
||||
return applyPatch(state, action, true, false).newDocument;
|
||||
}
|
||||
|
||||
export function useStreamLog() {
|
||||
const [latest, updateLatest] = useReducer(reducer, null);
|
||||
export function useStreamLog(callbacks: StreamCallback = {}) {
|
||||
const [latest, setLatest] = useState<RunState | null>(null);
|
||||
const [controller, setController] = useState<AbortController | null>(null);
|
||||
|
||||
const startRef = useRef(callbacks.onStart);
|
||||
startRef.current = callbacks.onStart;
|
||||
|
||||
const successRef = useRef(callbacks.onSuccess);
|
||||
successRef.current = callbacks.onSuccess;
|
||||
|
||||
const errorRef = useRef(callbacks.onError);
|
||||
errorRef.current = callbacks.onError;
|
||||
|
||||
const startStream = useCallback(async (input: unknown, config: unknown) => {
|
||||
const controller = new AbortController();
|
||||
setController(controller);
|
||||
startRef.current?.({ input });
|
||||
|
||||
let innerLatest: RunState | null = null;
|
||||
|
||||
await fetchEventSource(resolveApiUrl("/stream_log").toString(), {
|
||||
signal: controller.signal,
|
||||
method: "POST",
|
||||
@@ -58,14 +72,17 @@ export function useStreamLog() {
|
||||
body: JSON.stringify({ input, config }),
|
||||
onmessage(msg) {
|
||||
if (msg.event === "data") {
|
||||
updateLatest(JSON.parse(msg.data)?.ops);
|
||||
innerLatest = reducer(innerLatest, JSON.parse(msg.data)?.ops);
|
||||
setLatest(innerLatest);
|
||||
}
|
||||
},
|
||||
onclose() {
|
||||
setController(null);
|
||||
successRef.current?.({ input, output: innerLatest?.final_output });
|
||||
},
|
||||
onerror(error) {
|
||||
setController(null);
|
||||
errorRef.current?.();
|
||||
throw error;
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
function isAccessibleObject(x: unknown): x is Record<string | number, unknown> {
|
||||
return typeof x === "object" && x != null;
|
||||
}
|
||||
|
||||
export function traverseNaiveJsonPath(
|
||||
x: unknown,
|
||||
path: string | number | Array<string | number>
|
||||
) {
|
||||
const queue = Array.isArray(path) ? path : [path];
|
||||
let tmp: unknown = x;
|
||||
while (queue.length > 0) {
|
||||
const first = queue.shift()!;
|
||||
if (first === "") continue;
|
||||
if (Array.isArray(tmp)) {
|
||||
tmp = tmp[+first];
|
||||
} else if (isAccessibleObject(tmp)) {
|
||||
tmp = tmp[first];
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
return tmp;
|
||||
}
|
||||
@@ -4,6 +4,7 @@ type JsonSchemaExtra = JsonSchema & {
|
||||
extra: {
|
||||
widget: {
|
||||
type: string;
|
||||
[key: string]: string | number | Array<string | number>;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
[tool.poetry]
|
||||
name = "langserve"
|
||||
version = "0.0.22"
|
||||
version = "0.0.23.dev1"
|
||||
description = ""
|
||||
readme = "README.md"
|
||||
authors = ["LangChain"]
|
||||
|
||||
Reference in New Issue
Block a user