mirror of
https://github.com/langchain-ai/langserve.git
synced 2026-07-01 20:14:01 -04:00
Jacob Lee
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
@@ -330,6 +330,56 @@ runnable and share a link with the configuration:
|
||||
<img src="https://github.com/langchain-ai/langserve/assets/3205522/86ce9c59-f8e4-4d08-9fa3-62030e0f521d" width="50%"/>
|
||||
</p>
|
||||
|
||||
## Chat playground
|
||||
|
||||
LangServe also makes a chat-focused playground available at `/my_runnable/chat_playground/`.
|
||||
Unlike the general playground, only certain types of runnables are supported - the runnable's input schema must
|
||||
be a `dict` with a single key, and that key's value must be a list of chat messages. The runnable
|
||||
can return either an `AIMessage` or a string.
|
||||
|
||||
Here's an example route:
|
||||
|
||||
```python
|
||||
# Declare a chain
|
||||
prompt = ChatPromptTemplate.from_messages(
|
||||
[
|
||||
("system", "You are a helpful, professional assistant named Cob."),
|
||||
MessagesPlaceholder(variable_name="messages"),
|
||||
]
|
||||
)
|
||||
|
||||
chain = prompt | ChatAnthropic(model="claude-2")
|
||||
|
||||
|
||||
class InputChat(BaseModel):
|
||||
"""Input for the chat endpoint."""
|
||||
|
||||
messages: List[Union[HumanMessage, AIMessage, SystemMessage]] = Field(
|
||||
...,
|
||||
description="The chat messages representing the current conversation.",
|
||||
)
|
||||
|
||||
|
||||
add_routes(
|
||||
app,
|
||||
chain.with_types(input_type=InputChat),
|
||||
enable_feedback_endpoint=True,
|
||||
enable_public_trace_link_endpoint=True,
|
||||
)
|
||||
```
|
||||
|
||||
If you are using LangSmith, you can also set `enable_feedback_endpoint=True` on your route to enable thumbs-up/thumbs-down buttons
|
||||
after each message, and `enable_public_trace_link_endpoint=True` to add a button that creates a public traces for runs.
|
||||
|
||||
Here's an example with the above two options turned on:
|
||||
|
||||
<p align="center">
|
||||
<img src="./.github/img/chat_playground.png" width="50%"/>
|
||||
</p>
|
||||
|
||||
Note: If you enable public trace links, the internals of your chain will be exposed. We recommend only using this setting
|
||||
for demos or testing.
|
||||
|
||||
## Legacy Chains
|
||||
|
||||
LangServe works with both Runnables (constructed
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
#!/usr/bin/env python
|
||||
"""Example of a simple chatbot that just passes current conversation
|
||||
state back and forth between server and client.
|
||||
"""
|
||||
from typing import List, Union
|
||||
|
||||
from fastapi import FastAPI
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from langchain.chat_models import ChatAnthropic
|
||||
from langchain_core.messages import AIMessage, HumanMessage, SystemMessage
|
||||
from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
|
||||
|
||||
from langserve import add_routes
|
||||
from langserve.pydantic_v1 import BaseModel, Field
|
||||
|
||||
app = FastAPI(
|
||||
title="LangChain Server",
|
||||
version="1.0",
|
||||
description="Spin up a simple api server using Langchain's Runnable interfaces",
|
||||
)
|
||||
|
||||
|
||||
# Set all CORS enabled origins
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=["*"],
|
||||
allow_credentials=True,
|
||||
allow_methods=["*"],
|
||||
allow_headers=["*"],
|
||||
expose_headers=["*"],
|
||||
)
|
||||
|
||||
|
||||
# Declare a chain
|
||||
prompt = ChatPromptTemplate.from_messages(
|
||||
[
|
||||
("system", "You are a helpful, professional assistant named Cob."),
|
||||
MessagesPlaceholder(variable_name="messages"),
|
||||
]
|
||||
)
|
||||
|
||||
chain = prompt | ChatAnthropic(model="claude-2")
|
||||
|
||||
|
||||
class InputChat(BaseModel):
|
||||
"""Input for the chat endpoint."""
|
||||
|
||||
messages: List[Union[HumanMessage, AIMessage, SystemMessage]] = Field(
|
||||
...,
|
||||
description="The chat messages representing the current conversation.",
|
||||
)
|
||||
|
||||
|
||||
add_routes(
|
||||
app,
|
||||
chain.with_types(input_type=InputChat),
|
||||
enable_feedback_endpoint=True,
|
||||
enable_public_trace_link_endpoint=True,
|
||||
)
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
|
||||
uvicorn.run(app, host="localhost", port=8000)
|
||||
@@ -35,6 +35,7 @@ from starlette.requests import Request
|
||||
from starlette.responses import JSONResponse, Response
|
||||
|
||||
from langserve.callbacks import AsyncEventAggregatorCallback, CallbackEventDict
|
||||
from langserve.chat_playground import serve_chat_playground
|
||||
from langserve.lzstring import LZString
|
||||
from langserve.playground import serve_playground
|
||||
from langserve.pydantic_v1 import BaseModel, Field, ValidationError, create_model
|
||||
@@ -1366,6 +1367,54 @@ class APIHandler:
|
||||
public_trace_link_enabled,
|
||||
)
|
||||
|
||||
async def chat_playground(
|
||||
self,
|
||||
file_path: str,
|
||||
request: Request,
|
||||
*,
|
||||
config_hash: str = "",
|
||||
server_config: Optional[RunnableConfig] = None,
|
||||
) -> Any:
|
||||
"""Return the playground of the runnable."""
|
||||
with _with_validation_error_translation():
|
||||
user_provided_config = await _unpack_request_config(
|
||||
config_hash,
|
||||
config_keys=self._config_keys,
|
||||
model=self._ConfigPayload,
|
||||
request=request,
|
||||
# Do not use per request config modifier for output schema
|
||||
# since it's unclear why it would make sense to modify
|
||||
# this using a per request config modifier.
|
||||
# If this is needed, for some reason please file an issue explaining
|
||||
# the user case.
|
||||
per_req_config_modifier=None,
|
||||
server_config=server_config,
|
||||
)
|
||||
|
||||
config = _update_config_with_defaults(
|
||||
self._run_name, user_provided_config, request
|
||||
)
|
||||
|
||||
chat_playground_url = (
|
||||
request.scope.get("root_path", "").rstrip("/")
|
||||
+ self._base_url
|
||||
+ "/chat_playground"
|
||||
)
|
||||
feedback_enabled = tracing_is_enabled() and self._enable_feedback_endpoint
|
||||
public_trace_link_enabled = (
|
||||
tracing_is_enabled() and self._enable_public_trace_link_endpoint
|
||||
)
|
||||
|
||||
return await serve_chat_playground(
|
||||
self._runnable.with_config(config),
|
||||
self._runnable.with_config(config).input_schema,
|
||||
self._config_keys,
|
||||
chat_playground_url,
|
||||
file_path,
|
||||
feedback_enabled,
|
||||
public_trace_link_enabled,
|
||||
)
|
||||
|
||||
async def create_feedback(
|
||||
self, feedback_create_req: FeedbackCreateRequest
|
||||
) -> Feedback:
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import json
|
||||
import mimetypes
|
||||
import os
|
||||
from string import Template
|
||||
from typing import Sequence, Type
|
||||
|
||||
from fastapi.responses import Response
|
||||
from langchain.schema.runnable import Runnable
|
||||
|
||||
from langserve.pydantic_v1 import BaseModel
|
||||
|
||||
|
||||
class ChatPlaygroundTemplate(Template):
|
||||
delimiter = "____"
|
||||
|
||||
|
||||
def _get_mimetype(path: str) -> str:
|
||||
"""Get mimetype for file.
|
||||
|
||||
Custom implementation of mimetypes.guess_type that
|
||||
uses the file extension to determine the mimetype for some files.
|
||||
|
||||
This is necessary due to: https://bugs.python.org/issue43975
|
||||
Resolves issue: https://github.com/langchain-ai/langserve/issues/245
|
||||
|
||||
Args:
|
||||
path (str): Path to file
|
||||
|
||||
Returns:
|
||||
str: Mimetype of file
|
||||
"""
|
||||
try:
|
||||
file_extension = path.lower().split(".")[-1]
|
||||
except IndexError:
|
||||
return mimetypes.guess_type(path)[0]
|
||||
|
||||
if file_extension == "js":
|
||||
return "application/javascript"
|
||||
elif file_extension == "css":
|
||||
return "text/css"
|
||||
elif file_extension in ["htm", "html"]:
|
||||
return "text/html"
|
||||
|
||||
# If the file extension is not one of the specified ones,
|
||||
# use the default guess method
|
||||
mime_type = mimetypes.guess_type(path)[0]
|
||||
return mime_type
|
||||
|
||||
|
||||
async def serve_chat_playground(
|
||||
runnable: Runnable,
|
||||
input_schema: Type[BaseModel],
|
||||
config_keys: Sequence[str],
|
||||
base_url: str,
|
||||
file_path: str,
|
||||
feedback_enabled: bool,
|
||||
public_trace_link_enabled: bool,
|
||||
) -> Response:
|
||||
"""Serve the playground."""
|
||||
local_file_path = os.path.abspath(
|
||||
os.path.join(
|
||||
os.path.dirname(__file__),
|
||||
"./chat_playground/dist",
|
||||
file_path or "index.html",
|
||||
)
|
||||
)
|
||||
|
||||
base_dir = os.path.abspath(
|
||||
os.path.join(os.path.dirname(__file__), "./chat_playground/dist")
|
||||
)
|
||||
|
||||
if base_dir != os.path.commonpath((base_dir, local_file_path)):
|
||||
return Response("Not Found", status_code=404)
|
||||
try:
|
||||
with open(local_file_path, encoding="utf-8") as f:
|
||||
mime_type = _get_mimetype(local_file_path)
|
||||
if mime_type in ("text/html", "text/css", "application/javascript"):
|
||||
response = ChatPlaygroundTemplate(f.read()).substitute(
|
||||
LANGSERVE_BASE_URL=base_url[1:]
|
||||
if base_url.startswith("/")
|
||||
else base_url,
|
||||
LANGSERVE_CONFIG_SCHEMA=json.dumps(
|
||||
runnable.config_schema(include=config_keys).schema()
|
||||
),
|
||||
LANGSERVE_INPUT_SCHEMA=json.dumps(input_schema.schema()),
|
||||
LANGSERVE_FEEDBACK_ENABLED=json.dumps(
|
||||
"true" if feedback_enabled else "false"
|
||||
),
|
||||
LANGSERVE_PUBLIC_TRACE_LINK_ENABLED=json.dumps(
|
||||
"true" if public_trace_link_enabled else "false"
|
||||
),
|
||||
)
|
||||
else:
|
||||
response = f.buffer.read()
|
||||
except FileNotFoundError:
|
||||
return Response("Not Found", status_code=404)
|
||||
|
||||
return Response(response, media_type=mime_type)
|
||||
@@ -0,0 +1,18 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
.yarn
|
||||
|
||||
!dist
|
||||
@@ -0,0 +1,27 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
```
|
||||
|
||||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
+25
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/____LANGSERVE_BASE_URL/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chat Playground</title>
|
||||
<script type="module" crossorigin src="/____LANGSERVE_BASE_URL/assets/index-b1c907c0.js"></script>
|
||||
<link rel="stylesheet" href="/____LANGSERVE_BASE_URL/assets/index-a69b1f28.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
try {
|
||||
window.CONFIG_SCHEMA = ____LANGSERVE_CONFIG_SCHEMA;
|
||||
window.INPUT_SCHEMA = ____LANGSERVE_INPUT_SCHEMA;
|
||||
window.FEEDBACK_ENABLED = ____LANGSERVE_FEEDBACK_ENABLED;
|
||||
window.PUBLIC_TRACE_LINK_ENABLED = ____LANGSERVE_PUBLIC_TRACE_LINK_ENABLED;
|
||||
} catch (error) {
|
||||
// pass
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chat Playground</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
try {
|
||||
window.CONFIG_SCHEMA = ____LANGSERVE_CONFIG_SCHEMA;
|
||||
window.INPUT_SCHEMA = ____LANGSERVE_INPUT_SCHEMA;
|
||||
window.FEEDBACK_ENABLED = ____LANGSERVE_FEEDBACK_ENABLED;
|
||||
window.PUBLIC_TRACE_LINK_ENABLED = ____LANGSERVE_PUBLIC_TRACE_LINK_ENABLED;
|
||||
} catch (error) {
|
||||
// pass
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "langserve-chat-playground",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"packageManager": "yarn@1.22.19",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@jsonforms/core": "^3.2.1",
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@mui/icons-material": "^5.14.11",
|
||||
"@mui/material": "^5.14.11",
|
||||
"@mui/x-date-pickers": "^6.16.0",
|
||||
"@radix-ui/react-toggle-group": "^1.0.4",
|
||||
"clsx": "^2.0.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"fast-json-patch": "^3.1.1",
|
||||
"lodash": "^4.17.21",
|
||||
"lz-string": "^1.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-toastify": "^9.1.3",
|
||||
"swr": "^2.2.4",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"use-debounce": "^9.0.4",
|
||||
"vaul": "^0.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.200",
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.31",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5",
|
||||
"vite-plugin-svgr": "^4.1.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,116 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
color: #043D5C;
|
||||
font-weight: 300;
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
src: url('/dist/Manrope-VariableFont_wght.ttf') format('truetype');
|
||||
}
|
||||
border-color: #043D5C;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* clash between MUI and Tailwind */
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--popover: 0 0% 100%;
|
||||
--background: #F8F7FF;
|
||||
|
||||
--divider-500: 210 40% 96.1%; /* slate-100 */
|
||||
--divider-700: 214.3 31.8% 91.4%; /* slate-200 */
|
||||
|
||||
--ls-blue: 211.5 91.8% 61.8%;
|
||||
--ls-black: 222.2 47.4% 11.2%; /* slate-900 */
|
||||
--ls-gray-100: 215.4 16.3% 46.9%; /* slate-500 */
|
||||
--ls-gray-200: 212.7 26.8% 83.9%; /* slate-300 */
|
||||
--ls-gray-300: 214.3 31.8% 91.4%; /* slate-200 */
|
||||
--ls-gray-400: 210 40% 96.1%; /* slate-100 */
|
||||
|
||||
--button-green: #162E2E;
|
||||
--button-green-disabled: rgba(4, 61, 92, 0.20);
|
||||
--button-inline: #006BA41A;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--popover: 240 11.6% 8.4%;
|
||||
|
||||
--divider-500: 217.2 32.6% 17.5%; /* slate-800 */
|
||||
--divider-700: 215.3 25% 26.7%; /* slate-700 */
|
||||
|
||||
--ls-blue: 211.5 91.8% 61.8%;
|
||||
--ls-black: 0 0% 100%; /* white */
|
||||
--ls-gray-100: 215 20.2% 65.1%; /* slate-400 */
|
||||
--ls-gray-200: 215.4 16.3% 46.9%; /* slate-500 */
|
||||
--ls-gray-300: 215.3 25% 26.7%; /* slate-700 */
|
||||
--ls-gray-400: 217.2 32.6% 17.5%; /* slate-800 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
@apply flex flex-col border border-divider-700 rounded-lg p-3 gap-1 relative bg-background transition-all outline-ls-blue/20;
|
||||
@apply focus-within:border-ls-blue focus-within:outline focus-within:outline-4 focus-within:outline-ls-blue/20;
|
||||
}
|
||||
|
||||
.control > label,
|
||||
.control h6 {
|
||||
@apply text-xs uppercase font-semibold text-ls-gray-100;
|
||||
}
|
||||
|
||||
.control div .MuiGrid-item {
|
||||
@apply pt-0;
|
||||
}
|
||||
|
||||
.control > select {
|
||||
@apply -ml-1;
|
||||
}
|
||||
|
||||
.control > .input-description,
|
||||
.control > .validation {
|
||||
@apply absolute right-3 top-3 text-xs;
|
||||
}
|
||||
|
||||
.group-layout {
|
||||
@apply flex flex-col gap-4 bg-background p-4 border border-divider-700 rounded-lg;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical-layout {
|
||||
@apply flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.share-button:hover {
|
||||
background: linear-gradient(270deg, #BCB2FD 0.29%, #D65622 92%);
|
||||
}
|
||||
|
||||
.share-button:hover > * {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import "./App.css";
|
||||
|
||||
import { ChatWindow } from "./components/ChatWindow";
|
||||
import { AppCallbackContext, useAppStreamCallbacks } from "./useStreamCallback";
|
||||
import { useInputSchema } from "./useSchemas";
|
||||
import { useStreamLog } from "./useStreamLog";
|
||||
import { resolveApiUrl } from "./utils/url";
|
||||
|
||||
export function App() {
|
||||
const { context, callbacks } = useAppStreamCallbacks();
|
||||
const { startStream, stopStream } = useStreamLog(callbacks);
|
||||
const inputSchema = useInputSchema({});
|
||||
const inputProps = inputSchema?.data?.schema?.properties;
|
||||
const isLoading = inputProps === undefined;
|
||||
const inputKeys = Object.keys(inputProps ?? {});
|
||||
const isSupported = isLoading || (inputKeys.length === 1 && inputProps[inputKeys[0]].type === "array");
|
||||
return (
|
||||
<div className="flex items-center flex-col text-ls-black bg-background">
|
||||
<AppCallbackContext.Provider value={context}>
|
||||
{isSupported
|
||||
? <ChatWindow
|
||||
startStream={startStream}
|
||||
stopStream={stopStream}
|
||||
inputKey={inputKeys[0]}
|
||||
></ChatWindow>
|
||||
: <div className="h-[100vh] w-[100vw] flex justify-center items-center text-xl">
|
||||
<span className="text-center">
|
||||
The chat playground is only supported for chains that take a single array of messages as input.
|
||||
<br/>
|
||||
You can test this chain in the standard <a href={resolveApiUrl("/playground").toString()}>LangServe playground</a>.
|
||||
</span>
|
||||
</div>}
|
||||
</AppCallbackContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 310 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M7.7588 2H16.2414C17.0464 1.99999 17.7107 1.99998 18.2519 2.04419C18.814 2.09012 19.3307 2.18868 19.8161 2.43597C20.5687 2.81947 21.1806 3.43139 21.5641 4.18404C21.8114 4.66937 21.91 5.18608 21.9559 5.74817C22.0001 6.28936 22.0001 6.95372 22.0001 7.75868V13.2413C22.0001 14.0463 22.0001 14.7106 21.9559 15.2518C21.91 15.8139 21.8114 16.3306 21.5641 16.816C21.1806 17.5686 20.5687 18.1805 19.8161 18.564C19.3307 18.8113 18.814 18.9099 18.2519 18.9558C17.7107 19 17.0464 19 16.2414 19H13.6838C13.0197 19 12.8263 19.0047 12.6504 19.0408C12.4738 19.0771 12.303 19.137 12.1425 19.219C11.9826 19.3007 11.8286 19.4178 11.31 19.8327L8.89688 21.7632C8.7132 21.9102 8.52597 22.06 8.36137 22.1689C8.20394 22.273 7.8987 22.4593 7.50172 22.4597C7.0449 22.4602 6.61276 22.2525 6.32778 21.8955C6.08012 21.5852 6.03492 21.2305 6.01785 21.0425C6 20.846 6.00005 20.6062 6.00009 20.371L6.0001 18.9918C5.60829 18.9789 5.27229 18.9461 4.96482 18.8637C3.58445 18.4938 2.50626 17.4156 2.13639 16.0353C1.9993 15.5236 1.99962 14.933 2.00005 14.1376C2.00007 14.0924 2.0001 14.0465 2.0001 14L2.0001 7.7587C2.00008 6.95373 2.00007 6.28937 2.04429 5.74817C2.09022 5.18608 2.18878 4.66937 2.43607 4.18404C2.81956 3.43139 3.43149 2.81947 4.18413 2.43597C4.66947 2.18868 5.18617 2.09012 5.74827 2.04419C6.28947 1.99998 6.95383 1.99999 7.7588 2ZM5.91113 4.03755C5.47272 4.07337 5.24852 4.1383 5.09212 4.21799C4.71579 4.40973 4.40983 4.7157 4.21808 5.09202C4.13839 5.24842 4.07347 5.47262 4.03765 5.91104C4.00087 6.36113 4.0001 6.94342 4.0001 7.8V14C4.0001 14.9944 4.00869 15.2954 4.06824 15.5176C4.25318 16.2078 4.79227 16.7469 5.48246 16.9319C5.70474 16.9914 6.00574 17 7.0001 17C7.55238 17 8.0001 17.4477 8.0001 18V19.9194L10.0606 18.271C10.0834 18.2528 10.1058 18.2348 10.1279 18.2171C10.55 17.8791 10.8691 17.6237 11.2326 17.4379C11.5536 17.274 11.8952 17.1541 12.2483 17.0817C12.6482 16.9996 13.0569 16.9998 13.5976 17C13.626 17 13.6547 17 13.6838 17H16.2001C17.0567 17 17.639 16.9992 18.0891 16.9624C18.5275 16.9266 18.7517 16.8617 18.9081 16.782C19.2844 16.5903 19.5904 16.2843 19.7821 15.908C19.8618 15.7516 19.9267 15.5274 19.9625 15.089C19.9993 14.6389 20.0001 14.0566 20.0001 13.2V7.8C20.0001 6.94342 19.9993 6.36113 19.9625 5.91104C19.9267 5.47262 19.8618 5.24842 19.7821 5.09202C19.5904 4.7157 19.2844 4.40973 18.9081 4.21799C18.7517 4.1383 18.5275 4.07337 18.0891 4.03755C17.639 4.00078 17.0567 4 16.2001 4H7.8001C6.94352 4 6.36122 4.00078 5.91113 4.03755Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M12 5.45455C8.38505 5.45455 5.45455 8.38505 5.45455 12C5.45455 15.615 8.38505 18.5455 12 18.5455C15.615 18.5455 18.5455 15.615 18.5455 12C18.5455 8.38505 15.615 5.45455 12 5.45455ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM15.787 9.30392C16.071 9.58794 16.071 10.0484 15.787 10.3324L11.4233 14.6961C11.1393 14.9801 10.6788 14.9801 10.3948 14.6961L8.21301 12.5143C7.929 12.2303 7.929 11.7697 8.21301 11.4857C8.49703 11.2017 8.95751 11.2017 9.24153 11.4857L10.9091 13.1533L14.7585 9.30392C15.0425 9.01991 15.503 9.01991 15.787 9.30392Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 789 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 328 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 505 B |
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8.70711 5.29289C9.09763 5.68342 9.09763 6.31658 8.70711 6.70711L3.41421 12L8.70711 17.2929C9.09763 17.6834 9.09763 18.3166 8.70711 18.7071C8.31658 19.0976 7.68342 19.0976 7.29289 18.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L7.29289 5.29289C7.68342 4.90237 8.31658 4.90237 8.70711 5.29289ZM15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L16.7071 18.7071C16.3166 19.0976 15.6834 19.0976 15.2929 18.7071C14.9024 18.3166 14.9024 17.6834 15.2929 17.2929L20.5858 12L15.2929 6.70711C14.9024 6.31658 14.9024 5.68342 15.2929 5.29289Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 823 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.5 19.7783C4.5 21.5132 5.35498 22.3848 7.07324 22.3848H14.876C16.5942 22.3848 17.4492 21.5049 17.4492 19.7783V18.2427H18.9019C20.6118 18.2427 21.4751 17.3628 21.4751 15.6362V8.896C21.4751 7.875 21.2676 7.22754 20.645 6.58838L16.4531 2.33008C15.8638 1.72412 15.1665 1.5 14.2783 1.5H11.0991C9.38916 1.5 8.52588 2.37988 8.52588 4.10645V5.64209H7.07324C5.36328 5.64209 4.5 6.51367 4.5 8.24854V19.7783ZM16.6606 11.0874L12.0869 6.43066C11.4561 5.7832 10.9331 5.64209 10.0034 5.64209H9.8623V4.13135C9.8623 3.30957 10.3022 2.83643 11.1655 2.83643H14.8345V7.09473C14.8345 8.05762 15.2993 8.51416 16.2539 8.51416H20.1387V15.6113C20.1387 16.4414 19.6904 16.9062 18.8271 16.9062H17.4492V13.2954C17.4492 12.2329 17.3247 11.7681 16.6606 11.0874ZM16.0381 6.89551V3.49219L19.79 7.31055H16.4448C16.1543 7.31055 16.0381 7.18604 16.0381 6.89551ZM5.83643 19.7534V8.26514C5.83643 7.45166 6.27637 6.97852 7.13965 6.97852H9.8623V11.793C9.8623 12.8389 10.3936 13.3618 11.4229 13.3618H16.1128V19.7534C16.1128 20.5835 15.6646 21.0483 14.8096 21.0483H7.13135C6.27637 21.0483 5.83643 20.5835 5.83643 19.7534ZM11.5806 12.1084C11.2485 12.1084 11.1157 11.9756 11.1157 11.6436V7.28564L15.8555 12.1084H11.5806Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,21 @@
|
||||
<svg width="76" height="64" viewBox="0 0 76 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 145">
|
||||
<path id="Vector" d="M46.897 46.0711C56.7342 36.282 58.3487 22.0173 50.5032 14.2101C42.6577 6.40285 28.3231 8.00951 18.486 17.7986C8.64888 27.5878 7.03435 41.8524 14.8798 49.6597C22.7253 57.4669 37.0599 55.8602 46.897 46.0711Z" stroke="url(#paint0_linear_10720_23418)" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path id="Vector_2" d="M52.3165 46.0721C62.1536 36.2829 63.7681 22.0183 55.9226 14.211C48.0771 6.40383 33.7426 8.01049 23.9054 17.7996C14.0683 27.5888 12.4538 41.8534 20.2993 49.6606C28.1448 57.4679 42.4794 55.8612 52.3165 46.0721Z" stroke="url(#paint1_linear_10720_23418)" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path id="Vector_3" d="M57.7354 46.0721C67.5725 36.2829 69.1871 22.0183 61.3416 14.211C53.4961 6.40383 39.1615 8.01049 29.3244 17.7996C19.4873 27.5888 17.8727 41.8534 25.7182 49.6606C33.5637 57.4679 47.8983 55.8612 57.7354 46.0721Z" stroke="url(#paint2_linear_10720_23418)" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_10720_23418" x1="7.45971" y1="29.1331" x2="55.0891" y2="34.5103" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A75A3D"/>
|
||||
<stop offset="1" stop-color="#BCB2FD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_10720_23418" x1="12.9979" y1="29.1441" x2="60.6273" y2="34.5213" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#BB5831"/>
|
||||
<stop offset="1" stop-color="#BCB2FD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_10720_23418" x1="18.5356" y1="29.1542" x2="66.165" y2="34.5313" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CF5726"/>
|
||||
<stop offset="1" stop-color="#BCB2FD"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="23" viewBox="0 0 140 23" fill="none">
|
||||
<path d="M51.7334 4.44824V17.796H60.8269V15.7806H53.7978V4.44824H51.7334Z" fill="#043D5C"/>
|
||||
<path d="M65.6734 7.61523C63.6917 7.61523 62.2098 8.55468 61.6081 10.1923C61.5698 10.2971 61.454 10.6132 61.454 10.6132L63.1527 11.7243L63.3834 11.1159C63.777 10.0788 64.5049 9.59538 65.6734 9.59538C66.8418 9.59538 67.5105 10.1686 67.4983 11.2973C67.4983 11.3431 67.4949 11.4813 67.4949 11.4813C67.4949 11.4813 65.9485 11.7349 65.3112 11.8714C62.592 12.4525 61.4531 13.502 61.4531 15.2189C61.4531 16.1337 61.9555 17.1242 62.8724 17.6797C63.4226 18.0126 64.141 18.1385 64.9342 18.1385C65.4557 18.1385 65.9624 18.0601 66.4317 17.9157C67.4983 17.5574 67.7961 16.853 67.7961 16.853V17.774H69.5628V11.1899C69.5628 8.95177 68.1087 7.61523 65.6734 7.61523ZM67.5053 14.6413C67.5053 15.3333 66.76 16.308 65.0238 16.308C64.5336 16.308 64.1862 16.1768 63.9546 15.9813C63.6447 15.7198 63.5428 15.3439 63.5855 15.012C63.6037 14.8676 63.6899 14.5568 64.0095 14.2873C64.336 14.0118 64.9133 13.8145 65.8048 13.6182C66.538 13.4571 67.5062 13.2792 67.5062 13.2792V14.6422L67.5053 14.6413Z" fill="#043D5C"/>
|
||||
<path d="M76.0944 7.61514C75.8489 7.61514 75.6095 7.63275 75.377 7.66532C73.7949 7.90569 73.3317 8.71835 73.3317 8.71835L73.3335 7.90569H71.3535V17.7756H73.4179V12.3009C73.4179 10.4405 74.7597 9.59353 76.0065 9.59353C77.3543 9.59353 78.0091 10.3261 78.0091 11.8343V17.7756H80.0735V11.5473C80.0735 9.12072 78.5489 7.61426 76.0953 7.61426L76.0944 7.61514Z" fill="#043D5C"/>
|
||||
<path d="M88.6883 7.89874V8.91567C88.6883 8.91567 88.1824 7.61523 85.8812 7.61523C83.0218 7.61523 81.2456 9.61035 81.2456 12.8231C81.2456 14.636 81.8185 16.0632 82.8294 16.9648C83.6156 17.6657 84.6657 18.0249 85.916 18.0495C86.7858 18.0663 87.3492 17.8268 87.7009 17.6005C88.3766 17.1656 88.6273 16.7526 88.6273 16.7526C88.6273 16.7526 88.5986 17.0758 88.5464 17.5133C88.5089 17.8303 88.4384 18.0531 88.4384 18.0531C88.1241 19.1845 87.2046 19.8386 85.8638 19.8386C84.5229 19.8386 83.7105 19.3922 83.5495 18.5127L81.5425 19.1184C81.889 20.8089 83.458 21.8179 85.7392 21.8179C87.29 21.8179 88.5054 21.3918 89.3526 20.55C90.2068 19.7013 90.6404 18.4783 90.6404 16.9146V7.89786H88.6883V7.89874ZM88.5586 12.9129C88.5586 14.8887 87.6043 16.0685 86.0057 16.0685C84.293 16.0685 83.3109 14.8852 83.3109 12.8231C83.3109 10.7611 84.293 9.59538 86.0057 9.59538C87.566 9.59538 88.5438 10.7699 88.5586 12.6611V12.9129Z" fill="#043D5C"/>
|
||||
<path d="M102.741 15.7585C103.02 15.247 103.161 14.6439 103.161 13.965C103.161 13.2862 103.042 12.765 102.806 12.3432C102.57 11.9197 102.265 11.5737 101.901 11.314C101.534 11.0525 101.147 10.8465 100.752 10.7003C100.355 10.5541 99.9898 10.4362 99.6686 10.3508L97.3116 9.68602C97.0138 9.60589 96.716 9.50464 96.4252 9.38402C96.1318 9.26252 95.8819 9.09435 95.6843 8.88392C95.4823 8.66997 95.3795 8.39174 95.3795 8.05453C95.3795 7.70058 95.4988 7.38626 95.733 7.12036C95.9655 6.8571 96.2755 6.65284 96.6551 6.51285C97.0321 6.37285 97.4474 6.30506 97.8897 6.31122C98.3442 6.32355 98.7787 6.41776 99.1801 6.59209C99.5832 6.76642 99.9298 7.02351 100.21 7.35632C100.483 7.68033 100.672 8.07478 100.773 8.52997L103.051 8.12937C102.857 7.34048 102.526 6.65636 102.066 6.09639C101.598 5.52585 101.008 5.08386 100.311 4.78363C99.6137 4.48251 98.8083 4.32667 97.9167 4.32051C97.0391 4.31434 96.2267 4.4561 95.5084 4.74224C94.7918 5.02751 94.2145 5.46246 93.7923 6.03476C93.3708 6.60617 93.1566 7.32287 93.1566 8.16458C93.1566 8.7404 93.2515 9.22906 93.4396 9.61822C93.6277 10.0083 93.8732 10.3323 94.1684 10.5832C94.4653 10.835 94.784 11.034 95.1166 11.1766C95.4518 11.3201 95.7679 11.4364 96.0569 11.5209L99.4544 12.5369C99.6999 12.6118 99.9193 12.7016 100.107 12.8037C100.295 12.9067 100.452 13.023 100.573 13.1489C100.695 13.2756 100.789 13.4218 100.852 13.5838C100.915 13.7458 100.946 13.9237 100.946 14.1121C100.946 14.5338 100.812 14.8957 100.546 15.1854C100.284 15.4724 99.9385 15.6943 99.5197 15.8431C99.1026 15.9919 98.6524 16.0676 98.1805 16.0676C97.3839 16.0676 96.6699 15.8475 96.0595 15.4134C95.4579 14.9855 95.0513 14.3745 94.851 13.5979L92.6499 13.936C92.7857 14.7742 93.0983 15.5094 93.5789 16.1204C94.0683 16.7429 94.7021 17.228 95.4614 17.5617C96.2223 17.8963 97.0913 18.0662 98.0421 18.0662C98.7108 18.0662 99.3595 17.9799 99.9716 17.8091C100.582 17.6392 101.132 17.3803 101.607 17.0396C102.08 16.7006 102.462 16.2683 102.739 15.7568L102.741 15.7585Z" fill="#043D5C"/>
|
||||
<path d="M113.245 15.2689L111.168 14.6332C110.954 15.0814 110.651 15.4291 110.264 15.6686C109.869 15.9134 109.392 16.0375 108.848 16.0375C108.004 16.0375 107.351 15.754 106.908 15.1949C106.563 14.7582 106.35 14.1736 106.276 13.456L106.271 13.4076H113.371C113.449 12.2498 113.318 11.2302 112.981 10.3753C112.642 9.51334 112.114 8.83627 111.414 8.36258C110.714 7.88978 109.85 7.64941 108.847 7.64941C107.897 7.64941 107.05 7.86953 106.328 8.30359C105.607 8.73766 105.035 9.3575 104.63 10.1446C104.224 10.9326 104.018 11.8747 104.018 12.9462C104.018 13.9376 104.228 14.826 104.643 15.5859C105.057 16.3457 105.642 16.9488 106.382 17.3767C107.122 17.8055 107.994 18.0221 108.974 18.0221C109.955 18.0221 110.77 17.7747 111.542 17.2851C112.3 16.8053 112.873 16.1265 113.243 15.2671L113.245 15.2689ZM106.331 11.7744C106.432 11.1959 106.627 10.7178 106.909 10.3551C107.351 9.78717 108.034 9.49838 108.94 9.49838C109.742 9.49838 110.341 9.75459 110.717 10.2591C110.981 10.6148 111.156 11.1255 111.236 11.7761L111.243 11.8254H106.322L106.331 11.7735V11.7744Z" fill="#043D5C"/>
|
||||
<path d="M117.531 10.7923C117.724 10.5316 117.978 10.3142 118.285 10.1469C118.589 9.96199 118.939 9.85193 119.323 9.82023C119.68 9.79118 120.004 9.81407 120.285 9.88891V7.91932C120.011 7.87618 119.724 7.86473 119.434 7.8841C119.13 7.90524 118.83 7.96335 118.542 8.05667C118.253 8.15 117.987 8.27943 117.749 8.44143C117.469 8.61665 117.228 8.8394 117.029 9.10618C116.941 9.22416 116.861 9.34919 116.783 9.49094L116.701 9.63798V7.92637H114.855V17.7488H116.964V12.7548C116.964 12.3736 117.01 12.0126 117.101 11.6833C117.194 11.3522 117.337 11.052 117.531 10.7923Z" fill="#043D5C"/>
|
||||
<path d="M127.917 7.92578L125.426 15.201L122.928 7.92578H120.833L124.359 17.7482H126.494L130.019 7.92578H127.917Z" fill="#043D5C"/>
|
||||
<path d="M138.918 10.3753C138.579 9.51334 138.051 8.83627 137.351 8.36258C136.651 7.88978 135.787 7.64941 134.784 7.64941C133.834 7.64941 132.987 7.86953 132.265 8.30359C131.544 8.73766 130.972 9.3575 130.567 10.1446C130.16 10.9326 129.955 11.8756 129.955 12.9462C129.955 13.9376 130.165 14.826 130.58 15.5859C130.994 16.3457 131.579 16.9488 132.319 17.3767C133.059 17.8055 133.931 18.0221 134.911 18.0221C135.892 18.0221 136.706 17.7747 137.479 17.2851C138.237 16.8053 138.81 16.1265 139.18 15.2671L137.103 14.6314C136.889 15.0796 136.585 15.4274 136.199 15.6669C135.804 15.9116 135.328 16.0358 134.783 16.0358C133.939 16.0358 133.286 15.7523 132.844 15.1932C132.499 14.7565 132.285 14.1718 132.211 13.4543L132.206 13.4058H139.307C139.384 12.248 139.254 11.2285 138.917 10.3736L138.918 10.3753ZM132.258 11.8254L132.266 11.7735C132.367 11.195 132.561 10.7178 132.844 10.3542C133.287 9.78628 133.969 9.49749 134.875 9.49749C135.678 9.49749 136.276 9.75371 136.652 10.2582C136.917 10.6139 137.092 11.1246 137.172 11.7752L137.178 11.8245H132.258V11.8254Z" fill="#043D5C"/>
|
||||
<path d="M16.343 16.9848C16.3204 17.4497 15.7466 17.6381 15.3582 17.5808C15.2729 17.3722 15.1545 17.1635 14.9029 17.2797C14.6486 17.3819 14.37 17.2612 14.4292 16.9408C15.1449 16.9135 15.1911 15.9652 15.3321 15.4096C15.5837 16.0048 15.7631 16.6476 16.343 16.9848ZM43.1377 11.1333C43.1377 17.1987 38.2575 22.1337 32.2593 22.1337H11.2085C5.21031 22.1328 0.330078 17.1987 0.330078 11.1333C0.330078 5.06778 5.21031 0.132812 11.2085 0.132812H32.2601C38.2583 0.132812 43.1386 5.06778 43.1386 11.1333H43.1377ZM21.2937 16.6493C21.4653 16.4389 20.6729 15.8472 20.511 15.6289C20.1819 15.2679 20.1801 14.7493 19.9581 14.3276C19.4148 13.0553 18.7905 11.7918 17.9181 10.715C16.9951 9.53698 15.8571 8.56144 14.8567 7.45558C14.114 6.68342 13.9164 5.58461 13.2607 4.75434C12.3578 3.40547 9.50108 3.03744 9.08228 4.94275C9.08402 5.00175 9.06574 5.04048 9.01437 5.07834C8.78276 5.24827 8.57641 5.44197 8.40401 5.67794C7.98086 6.27401 7.91468 7.28653 8.44406 7.82185C8.46148 7.53923 8.47106 7.27333 8.69221 7.06994C9.10144 7.42477 9.71963 7.55067 10.1933 7.28565C11.2416 8.79828 10.9795 10.8911 11.8119 12.5209C12.0418 12.9065 12.2725 13.2992 12.5685 13.6382C12.808 14.015 13.6351 14.4596 13.683 14.8074C13.6917 15.4052 13.6221 16.0603 14.0104 16.5604C14.1924 16.9355 13.744 17.3123 13.3818 17.2656C12.9116 17.3308 12.3387 16.946 11.9268 17.1829C11.7814 17.3422 11.4967 17.1662 11.3713 17.3871C11.3278 17.5016 11.0927 17.6627 11.2329 17.7719C11.3887 17.6522 11.5333 17.528 11.7431 17.5985C11.7118 17.771 11.8467 17.7957 11.953 17.8459C11.9495 17.963 11.8816 18.0827 11.9704 18.1822C12.074 18.0765 12.1358 17.9269 12.3004 17.8828C12.8463 18.6198 13.4027 17.1371 14.5859 17.8045C14.3456 17.7922 14.1332 17.823 13.9704 18.0228C13.9303 18.0677 13.8963 18.1206 13.9669 18.1787C14.6051 17.7622 14.6016 18.3204 15.0161 18.1496C15.3347 17.9815 15.6508 17.771 16.0295 17.8309C15.6612 17.9383 15.6464 18.2377 15.4314 18.4904C15.3948 18.5291 15.3774 18.5731 15.4201 18.6374C16.1837 18.5722 16.2463 18.3152 16.8645 18.0008C17.3243 17.7164 17.7831 18.4058 18.1819 18.0132C18.2698 17.9277 18.39 17.9568 18.4988 17.9454C18.3595 17.1943 16.8288 18.0827 16.8532 17.0763C17.346 16.7374 17.2328 16.0894 17.2659 15.5655C17.8327 15.8833 18.4623 16.0682 19.0178 16.3711C19.2972 16.8281 19.7369 17.4329 20.3229 17.3933C20.3386 17.3475 20.3525 17.307 20.3691 17.2604C20.5467 17.2912 20.7748 17.41 20.8723 17.1829C21.1379 17.4637 21.528 17.4497 21.8754 17.3775C22.1322 17.1662 21.3921 16.8659 21.2929 16.6484L21.2937 16.6493ZM35.6828 14.8224C35.6828 13.5624 34.6728 12.5411 33.4268 12.5411C32.1809 12.5411 31.1709 13.5624 31.1709 14.8224C31.1709 16.0823 32.1809 17.1036 33.4268 17.1036C34.6728 17.1036 35.6828 16.0823 35.6828 14.8224ZM35.85 6.1754C34.1095 4.01123 30.551 4.02268 27.9032 6.20093C26.8549 7.0629 26.1069 8.13529 25.6925 9.25084C25.6368 9.40139 25.622 9.5634 25.6524 9.721C25.7378 10.1612 25.9084 11.1641 25.8492 11.9389C25.8048 12.5253 25.7317 12.9303 25.6768 13.1698C25.6394 13.3335 25.561 13.4832 25.4487 13.6073C25.4487 13.6073 24.9454 14.1629 24.7487 14.3804C24.5179 14.6357 24.1801 14.9492 23.9076 15.1825C23.7404 15.3251 23.433 15.5074 23.2754 15.5937C23.1239 15.6773 22.8932 15.8463 23.0743 16.0559C23.2554 16.2654 24.7077 17.639 24.7077 17.639C24.7077 17.639 24.9672 17.8388 25.1744 17.3669C25.3816 16.895 25.8719 16.3165 26.147 16.0427C26.43 15.7609 26.9576 15.2917 27.3781 15.1385C27.763 14.9985 28.7782 14.7194 30.4891 15.1385C30.6049 15.1534 30.7129 15.1684 30.8156 15.1842C30.8 15.0663 30.7913 14.9456 30.7913 14.8241C30.7913 13.3538 31.9737 12.1581 33.4277 12.1581C34.1565 12.1581 34.8173 12.4592 35.2945 12.9435C37.0228 10.8057 37.3215 8.00675 35.8491 6.17716L35.85 6.1754Z" fill="#043D5C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M4 5.33301C4 3.12387 5.79086 1.33301 8 1.33301C10.2091 1.33301 12 3.12387 12 5.33301V6.76656C12.1884 6.80784 12.3692 6.86796 12.544 6.95699C13.0457 7.21265 13.4537 7.6206 13.7093 8.12237C13.8742 8.44592 13.9399 8.79039 13.9705 9.16512C14 9.52592 14 9.96882 14 10.5055V10.8272C14 11.3639 14 11.8068 13.9705 12.1676C13.9399 12.5423 13.8742 12.8868 13.7093 13.2103C13.4537 13.7121 13.0457 14.12 12.544 14.3757C12.2204 14.5406 11.8759 14.6063 11.5012 14.6369C11.1404 14.6664 10.6975 14.6663 10.1609 14.6663H5.83912C5.30248 14.6663 4.85958 14.6664 4.49878 14.6369C4.12405 14.6063 3.77958 14.5406 3.45603 14.3757C2.95426 14.12 2.54631 13.7121 2.29065 13.2103C2.12579 12.8868 2.06008 12.5423 2.02946 12.1676C1.99998 11.8068 1.99999 11.3639 2 10.8272V10.5055C1.99999 9.96883 1.99998 9.52592 2.02946 9.16512C2.06008 8.79039 2.12579 8.44592 2.29065 8.12237C2.54631 7.6206 2.95426 7.21265 3.45603 6.95699C3.63076 6.86796 3.81159 6.80784 4 6.76656V5.33301ZM5.33333 6.66742C5.49181 6.66634 5.66026 6.66634 5.83913 6.66634H10.1609C10.3397 6.66634 10.5082 6.66634 10.6667 6.66742V5.33301C10.6667 3.86025 9.47276 2.66634 8 2.66634C6.52724 2.66634 5.33333 3.86025 5.33333 5.33301V6.66742ZM4.60736 8.02471C4.31508 8.04859 4.16561 8.09187 4.06135 8.145C3.81046 8.27283 3.60649 8.4768 3.47866 8.72769C3.42553 8.83195 3.38225 8.98142 3.35837 9.2737C3.33385 9.57376 3.33333 9.96195 3.33333 10.533V10.7997C3.33333 11.3707 3.33385 11.7589 3.35837 12.059C3.38225 12.3513 3.42553 12.5007 3.47866 12.605C3.60649 12.8559 3.81046 13.0599 4.06135 13.1877C4.16561 13.2408 4.31508 13.2841 4.60736 13.308C4.90742 13.3325 5.29561 13.333 5.86667 13.333H10.1333C10.7044 13.333 11.0926 13.3325 11.3926 13.308C11.6849 13.2841 11.8344 13.2408 11.9387 13.1877C12.1895 13.0599 12.3935 12.8559 12.5213 12.605C12.5745 12.5007 12.6178 12.3513 12.6416 12.059C12.6661 11.7589 12.6667 11.3707 12.6667 10.7997V10.533C12.6667 9.96195 12.6661 9.57376 12.6416 9.2737C12.6178 8.98142 12.5745 8.83195 12.5213 8.72769C12.3935 8.4768 12.1895 8.27283 11.9387 8.145C11.8344 8.09187 11.6849 8.04859 11.3926 8.02471C11.0926 8.00019 10.7044 7.99967 10.1333 7.99967H5.86667C5.29561 7.99967 4.90742 8.00019 4.60736 8.02471Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11.9999 2.51489C12.5522 2.51489 12.9999 2.96261 12.9999 3.51489V11.0002L20.4852 11.0002C21.0375 11.0002 21.4852 11.4479 21.4852 12.0002C21.4852 12.5525 21.0375 13.0002 20.4852 13.0002H12.9999V20.4855C12.9999 21.0377 12.5522 21.4855 11.9999 21.4855C11.4476 21.4855 10.9999 21.0377 10.9999 20.4855V13.0002H3.51465C2.96236 13.0002 2.51465 12.5525 2.51465 12.0002C2.51465 11.4479 2.96236 11.0002 3.51465 11.0002L10.9999 11.0002V3.51489C10.9999 2.96261 11.4476 2.51489 11.9999 2.51489Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 670 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M3.36651 2.85015C3.37578 2.85432 3.38505 2.85849 3.39431 2.86266L17.353 9.14401C17.5431 9.22954 17.7338 9.31532 17.8826 9.39905C18.0208 9.47682 18.2876 9.63803 18.4396 9.94548C18.6122 10.2947 18.6122 10.7043 18.4396 11.0535C18.2876 11.361 18.0208 11.5222 17.8826 11.5999C17.7338 11.6837 17.5431 11.7694 17.353 11.855L3.37128 18.1467C3.17613 18.2346 2.98174 18.3221 2.81784 18.3789C2.6676 18.4309 2.36452 18.5263 2.02916 18.4327C1.65046 18.327 1.34355 18.0493 1.20065 17.6831C1.07411 17.3587 1.13883 17.0476 1.17565 16.8929C1.21583 16.7242 1.28354 16.522 1.35152 16.3191L3.28934 10.5306L1.35514 4.70306C1.35194 4.69342 1.34873 4.68377 1.34553 4.67412C1.27829 4.47166 1.21126 4.26982 1.17161 4.10129C1.13521 3.94656 1.07155 3.63604 1.19844 3.31251C1.34183 2.9469 1.64871 2.66994 2.02706 2.56467C2.36186 2.47151 2.66425 2.56656 2.81444 2.61859C2.97804 2.67526 3.17198 2.76257 3.36651 2.85015ZM3.05652 4.5383L4.75852 9.66616H8.75109C9.21133 9.66616 9.58442 10.0393 9.58442 10.4995C9.58442 10.9597 9.21133 11.3328 8.75109 11.3328H4.77834L3.06259 16.458L16.3037 10.4995L3.05652 4.5383Z"
|
||||
fill="#fff" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.41009 2.41009C9.73553 2.08466 10.2632 2.08466 10.5886 2.41009L13.9219 5.74343C14.2474 6.06886 14.2474 6.5965 13.9219 6.92194C13.5965 7.24738 13.0689 7.24738 12.7434 6.92194L10.8327 5.01119V12.9993C10.8327 13.4596 10.4596 13.8327 9.99935 13.8327C9.53911 13.8327 9.16602 13.4596 9.16602 12.9993V5.01119L7.25527 6.92194C6.92984 7.24738 6.4022 7.24738 6.07676 6.92194C5.75132 6.5965 5.75132 6.06886 6.07676 5.74343L9.41009 2.41009ZM2.49935 9.66602C2.95959 9.66602 3.33268 10.0391 3.33268 10.4993V13.9993C3.33268 14.7132 3.33333 15.1984 3.36398 15.5735C3.39383 15.9388 3.44793 16.1257 3.51434 16.256C3.67413 16.5696 3.9291 16.8246 4.2427 16.9844C4.37303 17.0508 4.55987 17.1049 4.92521 17.1347C5.30029 17.1654 5.78553 17.166 6.49935 17.166H13.4993C14.2132 17.166 14.6984 17.1654 15.0735 17.1347C15.4388 17.1049 15.6257 17.0508 15.756 16.9844C16.0696 16.8246 16.3246 16.5696 16.4844 16.256C16.5508 16.1257 16.6049 15.9388 16.6347 15.5735C16.6654 15.1984 16.666 14.7132 16.666 13.9993V10.4993C16.666 10.0391 17.0391 9.66602 17.4993 9.66602C17.9596 9.66602 18.3327 10.0391 18.3327 10.4993V14.0338C18.3327 14.7046 18.3327 15.2582 18.2959 15.7092C18.2576 16.1776 18.1754 16.6082 17.9694 17.0127C17.6498 17.6399 17.1399 18.1498 16.5126 18.4694C16.1082 18.6754 15.6776 18.7576 15.2092 18.7959C14.7582 18.8327 14.2046 18.8327 13.5338 18.8327H6.46491C5.79411 18.8327 5.24049 18.8327 4.78949 18.7959C4.32108 18.7576 3.89049 18.6754 3.48605 18.4694C2.85884 18.1498 2.34891 17.6399 2.02933 17.0127C1.82325 16.6082 1.74112 16.1776 1.70284 15.7092C1.666 15.2582 1.66601 14.7046 1.66602 14.0338L1.66602 10.4993C1.66602 10.0391 2.03911 9.66602 2.49935 9.66602Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
|
||||
|
After Width: | Height: | Size: 374 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
|
||||
|
After Width: | Height: | Size: 354 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8 3C8 2.44772 8.44772 2 9 2H15C15.5523 2 16 2.44772 16 3C16 3.55228 15.5523 4 15 4H9C8.44772 4 8 3.55228 8 3ZM4.99224 5H3C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H4.06445L4.70614 16.6254C4.75649 17.3809 4.79816 18.006 4.87287 18.5149C4.95066 19.0447 5.07405 19.5288 5.33109 19.98C5.73123 20.6824 6.33479 21.247 7.06223 21.5996C7.52952 21.826 8.0208 21.917 8.55459 21.9593C9.06728 22 9.69383 22 10.4509 22H13.5491C14.3062 22 14.9327 22 15.4454 21.9593C15.9792 21.917 16.4705 21.826 16.9378 21.5996C17.6652 21.247 18.2688 20.6824 18.6689 19.98C18.926 19.5288 19.0493 19.0447 19.1271 18.5149C19.2018 18.006 19.2435 17.3808 19.2939 16.6253L19.9356 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H19.0078C19.0019 4.99995 18.9961 4.99995 18.9903 5H5.00974C5.00392 4.99995 4.99809 4.99995 4.99224 5ZM17.9311 7H6.06889L6.69907 16.4528C6.75274 17.2578 6.78984 17.8034 6.85166 18.2243C6.9117 18.6333 6.98505 18.8429 7.06888 18.99C7.26895 19.3412 7.57072 19.6235 7.93444 19.7998C8.08684 19.8736 8.30086 19.9329 8.71286 19.9656C9.13703 19.9993 9.68385 20 10.4907 20H13.5093C14.3161 20 14.863 19.9993 15.2871 19.9656C15.6991 19.9329 15.9132 19.8736 16.0656 19.7998C16.4293 19.6235 16.7311 19.3412 16.9311 18.99C17.015 18.8429 17.0883 18.6333 17.1483 18.2243C17.2102 17.8034 17.2473 17.2578 17.3009 16.4528L17.9311 7Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
|
||||
|
After Width: | Height: | Size: 346 B |
@@ -0,0 +1,54 @@
|
||||
import { Ref } from "react";
|
||||
import { cn } from "../utils/cn";
|
||||
|
||||
const COMMON_CLS = cn(
|
||||
"text-lg col-[1] row-[1] m-0 resize-none overflow-hidden whitespace-pre-wrap break-words border-none bg-transparent p-0"
|
||||
);
|
||||
|
||||
export function AutosizeTextarea(props: {
|
||||
id?: string;
|
||||
inputRef?: Ref<HTMLTextAreaElement>;
|
||||
value?: string | null | undefined;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
onChange?: (e: string) => void;
|
||||
onFocus?: () => void;
|
||||
onBlur?: () => void;
|
||||
onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
||||
autoFocus?: boolean;
|
||||
readOnly?: boolean;
|
||||
cursorPointer?: boolean;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("grid w-full", props.className) + " max-h-80 overflow-auto"}>
|
||||
<textarea
|
||||
ref={props.inputRef}
|
||||
id={props.id}
|
||||
className={cn(
|
||||
COMMON_CLS,
|
||||
"text-transparent caret-black"
|
||||
)}
|
||||
disabled={props.disabled}
|
||||
value={props.value ?? ""}
|
||||
rows={1}
|
||||
onChange={(e) => {
|
||||
const target = e.target as HTMLTextAreaElement;
|
||||
props.onChange?.(target.value);
|
||||
}}
|
||||
onFocus={props.onFocus}
|
||||
onBlur={props.onBlur}
|
||||
placeholder={props.placeholder}
|
||||
readOnly={props.readOnly}
|
||||
autoFocus={props.autoFocus && !props.readOnly}
|
||||
onKeyDown={props.onKeyDown}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(COMMON_CLS, "pointer-events-none select-none")}
|
||||
>
|
||||
{props.value}{" "}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from "react";
|
||||
import { CorrectnessFeedback } from "./feedback/CorrectnessFeedback";
|
||||
import { resolveApiUrl } from "../utils/url";
|
||||
|
||||
export type ChatMessageType = {
|
||||
role: "human" | "ai" | "function" | "tool" | "system";
|
||||
content: string;
|
||||
runId?: string;
|
||||
}
|
||||
|
||||
export function ChatMessage(props: {
|
||||
message: ChatMessageType;
|
||||
isLoading?: boolean;
|
||||
onError?: (e: any) => void;
|
||||
feedbackEnabled?: boolean;
|
||||
publicTraceLinksEnabled?: boolean;
|
||||
}) {
|
||||
const { message, feedbackEnabled, publicTraceLinksEnabled, onError, isLoading } = props;
|
||||
const { content, role, runId } = message;
|
||||
|
||||
const [publicTraceLink, setPublicTraceLink] = useState<string | null>(null);
|
||||
const [messageActionIsLoading, setMessageActionIsLoading] = useState(false);
|
||||
const openPublicTrace = async () => {
|
||||
if (messageActionIsLoading) {
|
||||
return;
|
||||
}
|
||||
if (publicTraceLink) {
|
||||
window.open(publicTraceLink, '_blank');
|
||||
return;
|
||||
}
|
||||
setMessageActionIsLoading(true);
|
||||
const payload = { run_id: runId };
|
||||
const response = await fetch(resolveApiUrl("/public_trace_link"), {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
onError?.(new Error(`Feedback endpoint not found. Please enable it in your LangServe endpoint.`));
|
||||
} else {
|
||||
try {
|
||||
const errorResponse = await response.json();
|
||||
onError?.(new Error(`${errorResponse.detail}`));
|
||||
} catch (e) {
|
||||
onError?.(new Error(`Request failed with status: ${response.status}`));
|
||||
}
|
||||
}
|
||||
setMessageActionIsLoading(false);
|
||||
throw new Error(`Failed request ${response.status}`)
|
||||
}
|
||||
const parsedResponse = await response.json();
|
||||
setMessageActionIsLoading(false);
|
||||
setPublicTraceLink(parsedResponse.public_url);
|
||||
window.open(parsedResponse.public_url, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<p className="font-medium text-transform uppercase mb-2">{role}</p>
|
||||
<p>{content}</p>
|
||||
{role === "ai" && !isLoading && runId != null && (
|
||||
<div className="mt-2 flex items-center">
|
||||
{feedbackEnabled && <span className="mr-2"><CorrectnessFeedback runId={runId} onError={props.onError}></CorrectnessFeedback></span>}
|
||||
{publicTraceLinksEnabled && <>
|
||||
<button
|
||||
className="bg-button-inline p-2 rounded-lg text-xs font-medium hover:opacity-80"
|
||||
disabled={messageActionIsLoading || isLoading}
|
||||
onMouseUp={openPublicTrace}
|
||||
>
|
||||
🛠️ View LangSmith trace
|
||||
</button>
|
||||
</>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,169 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
import { AutosizeTextarea } from "./AutosizeTextarea";
|
||||
import {
|
||||
ChatMessage,
|
||||
type ChatMessageType,
|
||||
} from "./ChatMessage";
|
||||
import { ShareDialog } from "./ShareDialog";
|
||||
import { useStreamCallback } from "../useStreamCallback";
|
||||
|
||||
import ArrowUp from "../assets/ArrowUp.svg?react";
|
||||
import CircleSpinIcon from "../assets/CircleSpinIcon.svg?react";
|
||||
import EmptyState from "../assets/EmptyState.svg?react";
|
||||
import LangServeLogo from "../assets/LangServeLogo.svg?react";
|
||||
import { useFeedback, usePublicTraceLink } from "../useSchemas";
|
||||
|
||||
export type AIMessage = {
|
||||
content: string;
|
||||
type: "AIMessage" | "AIMessageChunk";
|
||||
name?: string;
|
||||
additional_kwargs?: { [key: string]: unknown };
|
||||
}
|
||||
|
||||
export function isAIMessage(x: unknown): x is AIMessage {
|
||||
return x != null &&
|
||||
typeof (x as AIMessage).content === "string" &&
|
||||
["AIMessageChunk", "AIMessage"].includes((x as AIMessage).type);
|
||||
}
|
||||
|
||||
export function ChatWindow(props: {
|
||||
startStream: (input: unknown, config: unknown) => Promise<void>;
|
||||
stopStream: (() => void) | undefined;
|
||||
inputKey: string;
|
||||
}) {
|
||||
const { startStream, inputKey } = props;
|
||||
|
||||
const [currentInputValue, setCurrentInputValue] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [messages, setMessages] = useState<ChatMessageType[]>([]);
|
||||
const messageInputRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const feedbackEnabled = useFeedback()
|
||||
const publicTraceLinksEnabled = usePublicTraceLink();
|
||||
|
||||
const submitMessage = () => {
|
||||
const submittedValue = currentInputValue;
|
||||
if (submittedValue.length === 0 || isLoading) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
const newMessages = [
|
||||
...messages,
|
||||
{ role: "human", content: submittedValue } as const
|
||||
];
|
||||
setMessages(newMessages);
|
||||
setCurrentInputValue("");
|
||||
// TODO: Add config schema support
|
||||
startStream({ [inputKey]: newMessages }, {});
|
||||
};
|
||||
|
||||
useStreamCallback("onStart", () => {
|
||||
setMessages((prevMessages) => [
|
||||
...prevMessages,
|
||||
{ role: "ai", content: "" },
|
||||
]);
|
||||
});
|
||||
useStreamCallback("onChunk", (_chunk, aggregatedState) => {
|
||||
const finalOutput = aggregatedState?.final_output;
|
||||
if (typeof finalOutput === "string") {
|
||||
setMessages((prevMessages) => [
|
||||
...prevMessages.slice(0, -1),
|
||||
{ role: "ai", content: finalOutput, runId: aggregatedState?.id }
|
||||
]);
|
||||
} else if (isAIMessage(finalOutput)) {
|
||||
setMessages((prevMessages) => [
|
||||
...prevMessages.slice(0, -1),
|
||||
{ role: "ai", content: finalOutput.content, runId: aggregatedState?.id }
|
||||
]);
|
||||
}
|
||||
});
|
||||
useStreamCallback("onSuccess", () => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
useStreamCallback("onError", (e) => {
|
||||
setIsLoading(false);
|
||||
toast(e.message, { hideProgressBar: true });
|
||||
setCurrentInputValue(messages[messages.length - 2]?.content);
|
||||
setMessages((prevMessages) => [
|
||||
...prevMessages.slice(0, -2),
|
||||
]);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen w-screen">
|
||||
<nav className="flex items-center justify-between p-8">
|
||||
<div className="flex items-center">
|
||||
<LangServeLogo />
|
||||
<span className="ml-1">Playground</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<ShareDialog config={{}}>
|
||||
<button
|
||||
type="button"
|
||||
className="px-3 py-1 border rounded-full px-8 py-2 share-button"
|
||||
>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</ShareDialog>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="flex-grow flex flex-col items-center justify-center mt-8">
|
||||
{messages.length > 0 ? (
|
||||
<div className="flex flex-col-reverse basis-0 overflow-auto flex-re grow max-w-[640px] w-[640px]">
|
||||
{messages.map((message, i) => {
|
||||
return (
|
||||
<ChatMessage
|
||||
message={message}
|
||||
key={i}
|
||||
isLoading={isLoading}
|
||||
onError={(e: any) => toast(e.message, { hideProgressBar: true })}
|
||||
feedbackEnabled={feedbackEnabled.data}
|
||||
publicTraceLinksEnabled={publicTraceLinksEnabled.data}
|
||||
></ChatMessage>
|
||||
);
|
||||
}).reverse()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<EmptyState />
|
||||
<h1 className="text-lg">Start testing your application</h1>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="m-16 mt-4 flex justify-center">
|
||||
<div className="flex items-center p-3 rounded-[48px] border shadow-sm max-w-[768px] grow" onClick={() => messageInputRef.current?.focus()}>
|
||||
<AutosizeTextarea
|
||||
inputRef={messageInputRef}
|
||||
className="flex-grow mr-4 ml-8 border-none focus:ring-0 py-2 cursor-text"
|
||||
placeholder="Send a message..."
|
||||
value={currentInputValue}
|
||||
onChange={(newValue) => {
|
||||
setCurrentInputValue(newValue);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
submitMessage();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className={"flex items-center justify-center px-3 py-1 rounded-[40px] " + (isLoading ? "" : currentInputValue.length > 0 ? "bg-button-green" : "bg-button-green-disabled")}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
submitMessage();
|
||||
}}
|
||||
>
|
||||
{isLoading
|
||||
? <CircleSpinIcon className="animate-spin w-5 h-5 text-background fill-background" />
|
||||
: <ArrowUp className="mx-2 my-2 h-5 w-5 stroke-white" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ToastContainer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { Drawer } from "vaul";
|
||||
import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
|
||||
import CheckCircleIcon from "../assets/CheckCircleIcon.svg?react";
|
||||
import CodeIcon from "../assets/CodeIcon.svg?react";
|
||||
import CopyIcon from "../assets/CopyIcon.svg?react";
|
||||
import PadlockIcon from "../assets/PadlockIcon.svg?react";
|
||||
import ShareIcon from "../assets/ShareIcon.svg?react";
|
||||
import { compressToEncodedURIComponent } from "lz-string";
|
||||
import { getStateFromUrl } from "../utils/url";
|
||||
|
||||
const URL_LENGTH_LIMIT = 2000;
|
||||
|
||||
function CopyButton(props: { value: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const cbRef = useRef<number | null>(null);
|
||||
|
||||
function toggleCopied() {
|
||||
setCopied(true);
|
||||
|
||||
if (cbRef.current != null) window.clearTimeout(cbRef.current);
|
||||
cbRef.current = window.setTimeout(() => setCopied(false), 1500);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (cbRef.current != null) {
|
||||
window.clearTimeout(cbRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button
|
||||
className="px-3 py-1"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(props.value).then(toggleCopied);
|
||||
}}
|
||||
>
|
||||
{copied ? <CheckCircleIcon /> : <CopyIcon />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function ShareDialog(props: { config: unknown; children: ReactNode }) {
|
||||
const hash = useMemo(() => {
|
||||
return compressToEncodedURIComponent(JSON.stringify(props.config));
|
||||
}, [props.config]);
|
||||
|
||||
const state = getStateFromUrl(window.location.href);
|
||||
|
||||
// get base URL
|
||||
const targetUrl = `${state.basePath}/c/${hash}`;
|
||||
|
||||
// .../c/[hash]/chat_playground
|
||||
const playgroundUrl = `${targetUrl}/chat_playground`;
|
||||
|
||||
// cURL, JS: .../c/[hash]/invoke
|
||||
// Python: .../c/[hash]
|
||||
const invokeUrl = `${targetUrl}/invoke`;
|
||||
|
||||
const pythonSnippet = `
|
||||
from langserve import RemoteRunnable
|
||||
|
||||
chain = RemoteRunnable("${targetUrl}")
|
||||
chain.invoke({ ... })
|
||||
`;
|
||||
|
||||
const typescriptSnippet = `
|
||||
import { RemoteRunnable } from "langchain/runnables/remote";
|
||||
|
||||
const chain = new RemoteRunnable({ url: \`${invokeUrl}\` });
|
||||
const result = await chain.invoke({ ... });
|
||||
`;
|
||||
|
||||
return (
|
||||
<Drawer.Root>
|
||||
<Drawer.Trigger asChild>{props.children}</Drawer.Trigger>
|
||||
<Drawer.Portal>
|
||||
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
|
||||
<Drawer.Content className="flex justify-center items-center mt-24 fixed bottom-0 left-0 right-0 !pointer-events-none after:!bg-background">
|
||||
<div className="p-4 bg-background max-w-[calc(800px-2rem)] rounded-t-2xl border border-divider-500 border-b-background pointer-events-auto">
|
||||
<h3 className="flex items-center text-lg font-light">
|
||||
<ShareIcon className="flex-shrink-0 mr-2" />
|
||||
<span>Share</span>
|
||||
</h3>
|
||||
|
||||
<hr className="border-divider-500 my-4 -mx-4" />
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{playgroundUrl.length < URL_LENGTH_LIMIT && (
|
||||
<div className="flex flex-col gap-2 p-3 rounded-2xl">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 flex items-center justify-center text-center text-sm bg-background rounded-xl">
|
||||
🦜
|
||||
</div>
|
||||
<span>Chat interface</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-[auto,1fr,auto] rounded-xl text-sm items-center border">
|
||||
<PadlockIcon className="mx-3" />
|
||||
<div className="overflow-auto whitespace-nowrap py-3 no-scrollbar">
|
||||
{playgroundUrl.split("://")[1]}
|
||||
</div>
|
||||
<CopyButton value={playgroundUrl} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 p-3 rounded-2xl">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 flex items-center justify-center text-center text-sm bg-background rounded-xl">
|
||||
<CodeIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<span>Get the code</span>
|
||||
</div>
|
||||
|
||||
{targetUrl.length < URL_LENGTH_LIMIT && (
|
||||
<div className="grid grid-cols-[1fr,auto] rounded-xl text-sm items-center border">
|
||||
<div className="overflow-auto whitespace-nowrap px-3 py-3 no-scrollbar">
|
||||
Python SDK
|
||||
</div>
|
||||
<CopyButton value={pythonSnippet.trim()} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{invokeUrl.length < URL_LENGTH_LIMIT && (
|
||||
<div className="grid grid-cols-[1fr,auto] rounded-xl text-sm items-center border">
|
||||
<div className="overflow-auto whitespace-nowrap px-3 py-3 no-scrollbar">
|
||||
TypeScript SDK
|
||||
</div>
|
||||
|
||||
<CopyButton value={typescriptSnippet.trim()} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer.Content>
|
||||
</Drawer.Portal>
|
||||
</Drawer.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { toast } from "react-toastify";
|
||||
import ThumbsUpIcon from "../../assets/ThumbsUpIcon.svg?react";
|
||||
import ThumbsDownIcon from "../../assets/ThumbsDownIcon.svg?react";
|
||||
import CircleSpinIcon from "../../assets/CircleSpinIcon.svg?react";
|
||||
import CheckCircleIcon2 from "../../assets/CheckCircleIcon2.svg?react";
|
||||
import XCircle from "../../assets/XCircle.svg?react";
|
||||
import { resolveApiUrl } from "../../utils/url";
|
||||
import { useState } from "react";
|
||||
import useSWRMutation from "swr/mutation";
|
||||
|
||||
const useFeedbackMutation = (runId: string, onError?: (e: any) => void) => {
|
||||
interface FeedbackArguments {
|
||||
key: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
const [lastArg, setLastArg] = useState<FeedbackArguments | null>(null);
|
||||
|
||||
const mutation = useSWRMutation(
|
||||
["feedback", runId],
|
||||
async ([, runId], { arg }: { arg: FeedbackArguments }) => {
|
||||
const payload = { run_id: runId, key: arg.key, score: arg.score };
|
||||
setLastArg(arg);
|
||||
|
||||
const request = await fetch(resolveApiUrl("/feedback"), {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!request.ok) {
|
||||
if (request.status === 404) {
|
||||
onError?.(new Error(`Feedback endpoint not found. Please enable it in your LangServe endpoint.`));
|
||||
} else {
|
||||
try {
|
||||
const errorResponse = await request.json();
|
||||
onError?.(new Error(`${errorResponse.detail}`));
|
||||
} catch (e) {
|
||||
onError?.(new Error(`Request failed with status: ${request.status}`));
|
||||
}
|
||||
}
|
||||
throw new Error(`Failed request ${request.status}`)
|
||||
}
|
||||
const json: {
|
||||
id: string;
|
||||
score: number;
|
||||
} = await request.json();
|
||||
|
||||
toast("Feedback sent successfully!", { hideProgressBar: true });
|
||||
return json;
|
||||
}
|
||||
);
|
||||
|
||||
return { lastArg: mutation.isMutating ? lastArg : null, mutation };
|
||||
};
|
||||
|
||||
export function CorrectnessFeedback(props: { runId: string, onError?: (e: any) => void }) {
|
||||
const score = useFeedbackMutation(props.runId, props.onError);
|
||||
|
||||
if (props.runId == null) return null;
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className={"bg-background rounded p-1 hover:opacity-80"}
|
||||
disabled={score.mutation.isMutating}
|
||||
onClick={() => {
|
||||
if (score.mutation.data?.score !== 1) {
|
||||
score.mutation.trigger({ key: "correctness", score: 1 });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{score.lastArg?.score === 1 ? (
|
||||
<CircleSpinIcon className="animate-spin w-4 h-4 text-white/50 fill-white" />
|
||||
) : (
|
||||
(score.mutation.data?.score !== 1
|
||||
? <ThumbsUpIcon className="w-4 h-4" />
|
||||
: <CheckCircleIcon2 className="w-4 h-4 stroke-teal-500" />)
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={"bg-background rounded p-1 hover:opacity-80"}
|
||||
disabled={score.mutation.isMutating}
|
||||
onClick={() => {
|
||||
if (score.mutation.data?.score !== 0) {
|
||||
score.mutation.trigger({ key: "correctness", score: 0 });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{score.lastArg?.score === 0 ? (
|
||||
<CircleSpinIcon className="animate-spin w-4 h-4 text-white/50 fill-white" />
|
||||
) : (
|
||||
(score.mutation.data?.score !== 0
|
||||
? <ThumbsDownIcon className="w-4 h-4" />
|
||||
: <XCircle className="w-4 h-4 stroke-red-500" />)
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import relativeDate from "dayjs/plugin/relativeTime";
|
||||
|
||||
dayjs.extend(relativeDate);
|
||||
dayjs.extend(utc);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
|
||||
@@ -0,0 +1,9 @@
|
||||
import type { Operation } from "fast-json-patch";
|
||||
import type { RunState } from "./useStreamLog";
|
||||
|
||||
export interface StreamCallback {
|
||||
onSuccess?: (ctx: { input: unknown; output: unknown }) => void;
|
||||
onChunk?: (chunk: { ops?: Operation[] }, aggregatedState: RunState | null) => void;
|
||||
onError?: (error: any) => void;
|
||||
onStart?: (ctx: { input: unknown }) => void;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { resolveApiUrl } from "./utils/url";
|
||||
import { simplifySchema } from "./utils/simplifySchema";
|
||||
import { JsonSchema } from "@jsonforms/core";
|
||||
import { compressToEncodedURIComponent } from "lz-string";
|
||||
|
||||
import useSWR from "swr";
|
||||
import defaults from "./utils/defaults";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
CONFIG_SCHEMA?: any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
INPUT_SCHEMA?: any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
FEEDBACK_ENABLED?: any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
PUBLIC_TRACE_LINK_ENABLED?: any;
|
||||
}
|
||||
}
|
||||
|
||||
export function useFeedback() {
|
||||
return useSWR(["/feedback"], async () => {
|
||||
if (!import.meta.env.DEV && window.FEEDBACK_ENABLED) {
|
||||
return window.FEEDBACK_ENABLED === "true";
|
||||
}
|
||||
|
||||
const response = await fetch(resolveApiUrl("/feedback"), {
|
||||
method: "HEAD",
|
||||
});
|
||||
return response.ok;
|
||||
});
|
||||
}
|
||||
|
||||
export function usePublicTraceLink() {
|
||||
return useSWR(["/public_trace_link"], async () => {
|
||||
if (!import.meta.env.DEV && window.PUBLIC_TRACE_LINK_ENABLED) {
|
||||
return window.PUBLIC_TRACE_LINK_ENABLED === "true";
|
||||
}
|
||||
|
||||
const response = await fetch(resolveApiUrl("/public_trace_link"), {
|
||||
method: "HEAD",
|
||||
});
|
||||
return response.ok;
|
||||
});
|
||||
}
|
||||
|
||||
export function useConfigSchema() {
|
||||
return useSWR(["/config_schema"], async () => {
|
||||
let schema: JsonSchema | null = null;
|
||||
if (!import.meta.env.DEV && window.CONFIG_SCHEMA) {
|
||||
schema = await simplifySchema(window.CONFIG_SCHEMA);
|
||||
} else {
|
||||
const response = await fetch(resolveApiUrl(`/config_schema`));
|
||||
if (!response.ok) throw new Error(await response.text());
|
||||
|
||||
const json = await response.json();
|
||||
schema = await simplifySchema(json);
|
||||
}
|
||||
|
||||
if (schema == null) return null;
|
||||
return {
|
||||
schema,
|
||||
defaults: defaults(schema),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function useInputSchema(configData?: unknown) {
|
||||
return useSWR(
|
||||
["/input_schema", configData],
|
||||
async ([, configData]) => {
|
||||
// TODO: this won't work if we're already seeing a prefixed URL
|
||||
const prefix = configData
|
||||
? `/c/${compressToEncodedURIComponent(JSON.stringify(configData))}`
|
||||
: "";
|
||||
|
||||
let schema: JsonSchema | null = null;
|
||||
|
||||
if (!prefix && !import.meta.env.DEV && window.INPUT_SCHEMA) {
|
||||
schema = await simplifySchema(window.INPUT_SCHEMA);
|
||||
} else {
|
||||
const response = await fetch(resolveApiUrl(`${prefix}/input_schema`));
|
||||
if (!response.ok) throw new Error(await response.text());
|
||||
|
||||
const json = await response.json();
|
||||
schema = await simplifySchema(json);
|
||||
}
|
||||
|
||||
if (schema == null) return null;
|
||||
return {
|
||||
schema,
|
||||
defaults: defaults(schema),
|
||||
};
|
||||
},
|
||||
{ keepPreviousData: true }
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
MutableRefObject,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
} from "react";
|
||||
|
||||
import { StreamCallback } from "./types";
|
||||
|
||||
export const AppCallbackContext = createContext<MutableRefObject<{
|
||||
onStart: Exclude<StreamCallback["onStart"], undefined>[];
|
||||
onChunk: Exclude<StreamCallback["onChunk"], undefined>[];
|
||||
onSuccess: Exclude<StreamCallback["onSuccess"], undefined>[];
|
||||
onError: Exclude<StreamCallback["onError"], undefined>[];
|
||||
}> | null>(null);
|
||||
|
||||
export function useAppStreamCallbacks() {
|
||||
// callbacks handling
|
||||
const context = useRef<{
|
||||
onStart: Exclude<StreamCallback["onStart"], undefined>[];
|
||||
onChunk: Exclude<StreamCallback["onChunk"], undefined>[];
|
||||
onSuccess: Exclude<StreamCallback["onSuccess"], undefined>[];
|
||||
onError: Exclude<StreamCallback["onError"], undefined>[];
|
||||
}>({ onStart: [], onChunk: [], onSuccess: [], onError: [] });
|
||||
|
||||
const callbacks: StreamCallback = {
|
||||
onStart(...args) {
|
||||
for (const callback of context.current.onStart) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
onChunk(...args) {
|
||||
for (const callback of context.current.onChunk) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
onSuccess(...args) {
|
||||
for (const callback of context.current.onSuccess) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
onError(...args) {
|
||||
for (const callback of context.current.onError) {
|
||||
callback(...args);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return { context, callbacks };
|
||||
}
|
||||
|
||||
export function useStreamCallback<
|
||||
Type extends "onStart" | "onChunk" | "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]);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
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.
|
||||
id: string;
|
||||
// Name of the object being run.
|
||||
name: string;
|
||||
// Type of the object being run, eg. prompt, chain, llm, etc.
|
||||
type: string;
|
||||
// List of tags for the run.
|
||||
tags: string[];
|
||||
// Key-value pairs of metadata for the run.
|
||||
metadata: { [key: string]: unknown };
|
||||
// ISO-8601 timestamp of when the run started.
|
||||
start_time: string;
|
||||
// List of LLM tokens streamed by this run, if applicable.
|
||||
streamed_output_str: string[];
|
||||
// Final output of this run.
|
||||
// Only available after the run has finished successfully.
|
||||
final_output?: unknown;
|
||||
// ISO-8601 timestamp of when the run ended.
|
||||
// Only available after the run has finished.
|
||||
end_time?: string;
|
||||
}
|
||||
|
||||
export interface RunState {
|
||||
// ID of the run.
|
||||
id: string;
|
||||
// List of output chunks streamed by Runnable.stream()
|
||||
streamed_output: unknown[];
|
||||
// Final output of the run, usually the result of aggregating (`+`) streamed_output.
|
||||
// Only available after the run has finished successfully.
|
||||
final_output?: unknown;
|
||||
|
||||
// Map of run names to sub-runs. If filters were supplied, this list will
|
||||
// contain only the runs that matched the filters.
|
||||
logs: { [name: string]: LogEntry };
|
||||
}
|
||||
|
||||
function reducer(state: RunState | null, action: Operation[]) {
|
||||
return applyPatch(state, action, true, false).newDocument;
|
||||
}
|
||||
|
||||
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 chunkRef = useRef(callbacks.onChunk);
|
||||
chunkRef.current = callbacks.onChunk;
|
||||
|
||||
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",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ input, config }),
|
||||
onmessage(msg) {
|
||||
if (msg.event === "data") {
|
||||
innerLatest = reducer(innerLatest, JSON.parse(msg.data)?.ops);
|
||||
setLatest(innerLatest);
|
||||
chunkRef.current?.(JSON.parse(msg.data), innerLatest);
|
||||
}
|
||||
},
|
||||
openWhenHidden: true,
|
||||
onclose() {
|
||||
setController(null);
|
||||
successRef.current?.({ input, output: innerLatest?.final_output });
|
||||
},
|
||||
onerror(error) {
|
||||
setController(null);
|
||||
errorRef.current?.(error);
|
||||
throw error;
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
|
||||
const stopStream = useCallback(() => {
|
||||
controller?.abort();
|
||||
setController(null);
|
||||
}, [controller]);
|
||||
|
||||
return {
|
||||
startStream,
|
||||
stopStream: controller ? stopStream : undefined,
|
||||
latest,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import clsx from "clsx";
|
||||
import { ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
// (c) 2015 Chute Corporation. Released under the terms of the MIT License.
|
||||
// Modified to use TypeScript and handle edge cases with tuples
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable no-prototype-builtins */
|
||||
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* check whether item is plain object
|
||||
* @param {*} item
|
||||
* @return {Boolean}
|
||||
*/
|
||||
const isObject = (item: unknown): item is Record<string, unknown> => {
|
||||
return (
|
||||
typeof item === "object" &&
|
||||
item !== null &&
|
||||
item.toString() === {}.toString()
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* deep JSON object clone
|
||||
*
|
||||
* @param {Object} source
|
||||
* @return {Object}
|
||||
*/
|
||||
const cloneJSON = (source: any): any => {
|
||||
return JSON.parse(JSON.stringify(source));
|
||||
};
|
||||
|
||||
/**
|
||||
* returns a result of deep merge of two objects
|
||||
*
|
||||
* @param {Object} target
|
||||
* @param {Object} source
|
||||
* @return {Object}
|
||||
*/
|
||||
const merge = (
|
||||
target: Record<string, unknown>,
|
||||
source: Record<string, unknown>
|
||||
) => {
|
||||
target = cloneJSON(target);
|
||||
|
||||
for (const key in source) {
|
||||
if (source.hasOwnProperty(key)) {
|
||||
const sourceKeyValue = source[key];
|
||||
const targetKeyValue = target[key];
|
||||
|
||||
if (isObject(sourceKeyValue) && isObject(targetKeyValue)) {
|
||||
target[key] = merge(targetKeyValue, sourceKeyValue);
|
||||
} else {
|
||||
target[key] = sourceKeyValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
};
|
||||
|
||||
/**
|
||||
* get object by reference. works only with local references that points on
|
||||
* definitions object
|
||||
*
|
||||
* @param {String} path
|
||||
* @param {Object} definitions
|
||||
* @return {Object}
|
||||
*/
|
||||
const getLocalRef = function (
|
||||
inputPath: string,
|
||||
definitions: Record<string, unknown>
|
||||
) {
|
||||
const path = inputPath.replace(/^#\/definitions\//, "").split("/");
|
||||
|
||||
const find = function (path: string[], root: any): any {
|
||||
const key = path.shift();
|
||||
if (!key) return {};
|
||||
|
||||
if (!root[key]) {
|
||||
return {};
|
||||
} else if (!path.length) {
|
||||
return root[key];
|
||||
} else {
|
||||
return find(path, root[key]);
|
||||
}
|
||||
};
|
||||
|
||||
const result = find(path, definitions);
|
||||
|
||||
if (!isObject(result)) {
|
||||
return result;
|
||||
}
|
||||
return cloneJSON(result);
|
||||
};
|
||||
|
||||
/**
|
||||
* merge list of objects from allOf properties
|
||||
* if some of objects contains $ref field extracts this reference and merge it
|
||||
*
|
||||
* @param {Array} allOfList
|
||||
* @param {Object} definitions
|
||||
* @return {Object}
|
||||
*/
|
||||
const mergeAllOf = function (allOfList: any[], definitions: any) {
|
||||
const length = allOfList.length;
|
||||
let index = -1,
|
||||
result = {};
|
||||
|
||||
while (++index < length) {
|
||||
let item = allOfList[index];
|
||||
|
||||
item =
|
||||
typeof item.$ref !== "undefined"
|
||||
? getLocalRef(item.$ref, definitions)
|
||||
: item;
|
||||
|
||||
result = merge(result, item);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* returns a object that built with default values from json schema
|
||||
*
|
||||
* @param {Object} schema
|
||||
* @param {Object} definitions
|
||||
* @return {Object}
|
||||
*/
|
||||
const defaults = (schema: any, definitions: Record<string, any>): unknown => {
|
||||
if (typeof schema["default"] !== "undefined") {
|
||||
return schema["default"];
|
||||
} else if (typeof schema.allOf !== "undefined") {
|
||||
const mergedItem = mergeAllOf(schema.allOf, definitions);
|
||||
return defaults(mergedItem, definitions);
|
||||
} else if (typeof schema.$ref !== "undefined") {
|
||||
const reference = getLocalRef(schema.$ref, definitions);
|
||||
return defaults(reference, definitions);
|
||||
} else if (schema.type === "object") {
|
||||
if (!schema.properties) {
|
||||
return {};
|
||||
}
|
||||
|
||||
for (const key in schema.properties) {
|
||||
if (schema.properties.hasOwnProperty(key)) {
|
||||
schema.properties[key] = defaults(schema.properties[key], definitions);
|
||||
|
||||
if (typeof schema.properties[key] === "undefined") {
|
||||
delete schema.properties[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return schema.properties;
|
||||
} else if (schema.type === "array") {
|
||||
if (!schema.items) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// minimum item count
|
||||
const ct = schema.minItems || 0;
|
||||
|
||||
// tuple-typed arrays
|
||||
if (schema.items.constructor === Array) {
|
||||
const values = schema.items.map((item: unknown) =>
|
||||
defaults(item, definitions)
|
||||
);
|
||||
|
||||
// remove undefined items at the end (unless required by minItems)
|
||||
for (let i = values.length - 1; i >= 0; i--) {
|
||||
if (typeof values[i] !== "undefined") {
|
||||
break;
|
||||
}
|
||||
if (i + 1 > ct) {
|
||||
values.pop();
|
||||
}
|
||||
}
|
||||
|
||||
// if all values are undefined -> return undefined even
|
||||
// if minItems is set
|
||||
if (values.every((item: unknown) => typeof item === "undefined")) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
// object-typed arrays
|
||||
const value = defaults(schema.items, definitions);
|
||||
|
||||
if (typeof value === "undefined") {
|
||||
return [];
|
||||
} else {
|
||||
const values = [];
|
||||
for (let i = 0; i < Math.max(0, ct); i++) {
|
||||
values.push(cloneJSON(value));
|
||||
}
|
||||
return values;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* main function
|
||||
*
|
||||
* @param {Object} schema
|
||||
* @param {Object|undefined} definitions
|
||||
* @return {Object}
|
||||
*/
|
||||
export default function (
|
||||
schema: any,
|
||||
definitions?: Record<string, unknown> | undefined
|
||||
) {
|
||||
if (typeof definitions === "undefined") {
|
||||
definitions = (schema.definitions as Record<string, unknown>) || {};
|
||||
} else if (isObject(schema.definitions)) {
|
||||
definitions = merge(definitions, schema.definitions);
|
||||
}
|
||||
|
||||
return defaults(cloneJSON(schema), definitions);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
export const JsonRefs: {
|
||||
resolveRefs(schema: any): Promise<{ resolved: any }>;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,7 @@
|
||||
export function getMessageContent(x: unknown) {
|
||||
if (typeof x === "string") return x;
|
||||
if (typeof x === "object" && x != null) {
|
||||
if ("content" in x && typeof x.content === "string") return x.content;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
function isAccessibleObject(x: unknown): x is Record<string | number, unknown> {
|
||||
return typeof x === "object" && x != null;
|
||||
}
|
||||
|
||||
export function getNormalizedJsonPath(
|
||||
path: string | number | Array<string | number>
|
||||
) {
|
||||
return Array.isArray(path) ? path : [path];
|
||||
}
|
||||
|
||||
export function traverseNaiveJsonPath(
|
||||
x: unknown,
|
||||
path: string | number | Array<string | number>
|
||||
) {
|
||||
const queue = getNormalizedJsonPath(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;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { JsonSchema } from "@jsonforms/core";
|
||||
|
||||
type JsonSchemaExtra = JsonSchema & {
|
||||
extra: {
|
||||
widget: {
|
||||
type: string;
|
||||
[key: string]: string | number | Array<string | number>;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export function isJsonSchemaExtra(x: JsonSchema): x is JsonSchemaExtra {
|
||||
if (!("extra" in x && typeof x.extra === "object" && x.extra != null)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!(
|
||||
"widget" in x.extra &&
|
||||
typeof x.extra.widget === "object" &&
|
||||
x.extra.widget != null
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { JsonRefs } from "./json-refs";
|
||||
|
||||
// jsonforms doesn't support schemas with root $ref
|
||||
// so we resolve root $ref and replace it with the actual schema
|
||||
export function simplifySchema(schema: any) {
|
||||
return JsonRefs.resolveRefs(schema).then((r: any) => r.resolved);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export function str(o: unknown): React.ReactNode {
|
||||
return typeof o === "object"
|
||||
? JSON.stringify(o, null, 2)
|
||||
: (o as React.ReactNode);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { decompressFromEncodedURIComponent } from "lz-string";
|
||||
|
||||
export function getStateFromUrl(path: string) {
|
||||
let configFromUrl = null;
|
||||
let basePath = path;
|
||||
if (basePath.endsWith("/")) {
|
||||
basePath = basePath.slice(0, -1);
|
||||
}
|
||||
|
||||
if (basePath.endsWith("/chat_playground")) {
|
||||
basePath = basePath.slice(0, -"/chat_playground".length);
|
||||
}
|
||||
|
||||
// check if we can omit the last segment
|
||||
const [configHash, c, ...rest] = basePath.split("/").reverse();
|
||||
if (c === "c") {
|
||||
basePath = rest.reverse().join("/");
|
||||
try {
|
||||
configFromUrl = JSON.parse(decompressFromEncodedURIComponent(configHash));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
return { basePath, configFromUrl };
|
||||
}
|
||||
|
||||
export function resolveApiUrl(path: string) {
|
||||
const { basePath } = getStateFromUrl(window.location.href);
|
||||
let prefix = new URL(basePath).pathname;
|
||||
if (prefix.endsWith("/")) prefix = prefix.slice(0, -1);
|
||||
|
||||
return new URL(prefix + path, basePath);
|
||||
}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
@@ -0,0 +1,36 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
},
|
||||
background: {
|
||||
DEFAULT: "var(--background)",
|
||||
},
|
||||
button: {
|
||||
"green": "var(--button-green)",
|
||||
"green-disabled": "var(--button-green-disabled)",
|
||||
"inline": "var(--button-inline)"
|
||||
},
|
||||
ls: {
|
||||
blue: "hsl(211.5, 91.8%, 61.8%)",
|
||||
black: "hsl(var(--ls-black))",
|
||||
gray: {
|
||||
100: "hsl(var(--ls-gray-100))",
|
||||
200: "hsl(var(--ls-gray-200))",
|
||||
300: "hsl(var(--ls-gray-300))",
|
||||
400: "hsl(var(--ls-gray-400))",
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
500: "hsl(var(--divider-500))",
|
||||
700: "hsl(var(--divider-700))",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import svgr from "vite-plugin-svgr";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: "/____LANGSERVE_BASE_URL/",
|
||||
plugins: [svgr(), react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"^/____LANGSERVE_BASE_URL.*/(config_schema|input_schema|stream_log|feedback|public_trace_link)(/[a-zA-Z0-9-]*)?$": {
|
||||
target: "http://127.0.0.1:8000",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace("/____LANGSERVE_BASE_URL", ""),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
+26
-4
@@ -112,6 +112,7 @@ EndpointName = Literal[
|
||||
"stream_log",
|
||||
"stream_events",
|
||||
"playground",
|
||||
"chat_playground",
|
||||
"feedback",
|
||||
"public_trace_link",
|
||||
"input_schema",
|
||||
@@ -129,6 +130,7 @@ KNOWN_ENDPOINTS = {
|
||||
"stream_log",
|
||||
"stream_events",
|
||||
"playground",
|
||||
"chat_playground",
|
||||
"feedback",
|
||||
"public_trace_link",
|
||||
"input_schema",
|
||||
@@ -177,6 +179,7 @@ class _EndpointConfiguration:
|
||||
is_stream_log_enabled = True
|
||||
is_stream_events_enabled = True
|
||||
is_playground_enabled = True
|
||||
is_chat_playground_enabled = True
|
||||
is_input_schema_enabled = True
|
||||
is_output_schema_enabled = True
|
||||
is_config_schema_enabled = True
|
||||
@@ -194,6 +197,9 @@ class _EndpointConfiguration:
|
||||
is_stream_log_enabled = "stream_log" not in disabled_endpoints_
|
||||
is_stream_events_enabled = "stream_events" not in disabled_endpoints_
|
||||
is_playground_enabled = "playground" not in disabled_endpoints_
|
||||
is_chat_playground_enabled = (
|
||||
"chat_playground" not in disabled_endpoints_
|
||||
)
|
||||
is_input_schema_enabled = "input_schema" not in disabled_endpoints_
|
||||
is_output_schema_enabled = "output_schema" not in disabled_endpoints_
|
||||
is_config_schema_enabled = "config_schema" not in disabled_endpoints_
|
||||
@@ -210,6 +216,7 @@ class _EndpointConfiguration:
|
||||
is_stream_log_enabled = "stream_log" in enabled_endpoints_
|
||||
is_stream_events_enabled = "stream_events" in enabled_endpoints_
|
||||
is_playground_enabled = "playground" in enabled_endpoints_
|
||||
is_chat_playground_enabled = "chat_playground" in enabled_endpoints_
|
||||
is_input_schema_enabled = "input_schema" in enabled_endpoints_
|
||||
is_output_schema_enabled = "output_schema" in enabled_endpoints_
|
||||
is_config_schema_enabled = "config_schema" in enabled_endpoints_
|
||||
@@ -221,6 +228,7 @@ class _EndpointConfiguration:
|
||||
self.is_stream_log_enabled = is_stream_log_enabled
|
||||
self.is_stream_events_enabled = is_stream_events_enabled
|
||||
self.is_playground_enabled = is_playground_enabled
|
||||
self.is_chat_playground_enabled = is_chat_playground_enabled
|
||||
self.is_input_schema_enabled = is_input_schema_enabled
|
||||
self.is_output_schema_enabled = is_output_schema_enabled
|
||||
self.is_config_schema_enabled = is_config_schema_enabled
|
||||
@@ -305,8 +313,8 @@ def add_routes(
|
||||
enabled_endpoints: A list of endpoints which should be enabled. If not
|
||||
specified, all associated endpoints will be enabled. The list can contain
|
||||
the following values: *invoke*, *batch*, *stream*, *stream_log*,
|
||||
*playground*, *input_schema*, *output_schema*, *config_schema*,
|
||||
*config_hashes*.
|
||||
*playground*, *chat_playground*, *input_schema*, *output_schema*,
|
||||
*config_schema*, *config_hashes*.
|
||||
|
||||
*config_hashes* represents the config hash variant (when it exists)
|
||||
of each endpoint. Enabling this is useful when working with configurable
|
||||
@@ -329,8 +337,8 @@ def add_routes(
|
||||
disabled_endpoints: A list of endpoints which should be disabled. If not
|
||||
specified, all associated endpoints will be enabled. The list can contain
|
||||
the following values: *invoke*, *batch*, *stream*, *stream_log*,
|
||||
*playground*, *input_schema*, *output_schema*, *config_schema*,
|
||||
*config_hashes*.
|
||||
*playground*, *chat_playground*, *input_schema*, *output_schema*,
|
||||
*config_schema*, *config_hashes*.
|
||||
|
||||
*config_hashes* represents the config hash variant (when it exists)
|
||||
of each endpoint. Enabling this is useful when working with configurable
|
||||
@@ -694,6 +702,20 @@ def add_routes(
|
||||
include_in_schema=False,
|
||||
)(playground)
|
||||
|
||||
if endpoint_configuration.is_chat_playground_enabled:
|
||||
chat_playground = app.get(
|
||||
namespace + "/chat_playground/{file_path:path}",
|
||||
dependencies=dependencies,
|
||||
include_in_schema=False,
|
||||
)(api_handler.chat_playground)
|
||||
|
||||
if endpoint_configuration.is_config_hash_enabled:
|
||||
app.get(
|
||||
namespace + "/c/{config_hash}/chat_playground/{file_path:path}",
|
||||
dependencies=dependencies,
|
||||
include_in_schema=False,
|
||||
)(chat_playground)
|
||||
|
||||
if enable_feedback_endpoint:
|
||||
app.post(
|
||||
namespace + "/feedback",
|
||||
|
||||
@@ -1,2 +1 @@
|
||||
# LangServe Playground 🦜️🔗
|
||||
|
||||
# LangServe Playground 🦜️🏓
|
||||
|
||||
Reference in New Issue
Block a user