diff --git a/backend/app/api/runs.py b/backend/app/api/runs.py
index 70a72968..63b7c5db 100644
--- a/backend/app/api/runs.py
+++ b/backend/app/api/runs.py
@@ -1,5 +1,5 @@
 import json
-from typing import Optional, Sequence
+from typing import Dict, Optional, Sequence, Union
 
 import langsmith.client
 from fastapi import APIRouter, BackgroundTasks, HTTPException, Request
@@ -26,8 +26,8 @@ class CreateRunPayload(BaseModel):
 
     assistant_id: str
     thread_id: str
-    input: Optional[Sequence[AnyMessage]] = Field(default_factory=list)
     config: Optional[RunnableConfig] = None
+    input: Optional[Union[Sequence[AnyMessage], Dict]] = Field(default_factory=list)
 
 
 async def _run_input_and_config(request: Request, opengpts_user_id: OpengptsUserId):
@@ -41,7 +41,7 @@ async def _run_input_and_config(request: Request, opengpts_user_id: OpengptsUser
     config: RunnableConfig = {
         **assistant["config"],
         "configurable": {
-            **assistant["config"]["configurable"],
+            **assistant["config"].get("configurable", {}),
             **(body.get("config", {}).get("configurable") or {}),
             "user_id": opengpts_user_id,
             "thread_id": body["thread_id"],
@@ -81,7 +81,6 @@ async def stream_run(
 ):
     """Create a run."""
     input_, config = await _run_input_and_config(request, opengpts_user_id)
-
     return EventSourceResponse(to_sse(astream_messages(agent, input_, config)))
 
 
diff --git a/backend/app/api/threads.py b/backend/app/api/threads.py
index 31fe6584..5087f895 100644
--- a/backend/app/api/threads.py
+++ b/backend/app/api/threads.py
@@ -1,4 +1,4 @@
-from typing import Annotated, List, Sequence
+from typing import Annotated, Any, Dict, List, Optional, Sequence, Union
 from uuid import uuid4
 
 from fastapi import APIRouter, HTTPException, Path
@@ -21,10 +21,11 @@ class ThreadPutRequest(BaseModel):
     assistant_id: str = Field(..., description="The ID of the assistant to use.")
 
 
-class ThreadMessagesPostRequest(BaseModel):
+class ThreadPostRequest(BaseModel):
     """Payload for adding messages to a thread."""
 
-    messages: Sequence[AnyMessage]
+    values: Optional[Union[Dict[str, Any], Sequence[AnyMessage]]]
+    config: Optional[Dict[str, Any]] = None
 
 
 @router.get("/")
@@ -33,23 +34,25 @@ async def list_threads(opengpts_user_id: OpengptsUserId) -> List[Thread]:
     return await storage.list_threads(opengpts_user_id)
 
 
-@router.get("/{tid}/messages")
-async def get_thread_messages(
+@router.get("/{tid}/state")
+async def get_thread_state(
     opengpts_user_id: OpengptsUserId,
     tid: ThreadID,
 ):
     """Get all messages for a thread."""
-    return await storage.get_thread_messages(opengpts_user_id, tid)
+    return await storage.get_thread_state(opengpts_user_id, tid)
 
 
-@router.post("/{tid}/messages")
-async def add_thread_messages(
+@router.post("/{tid}/state")
+async def update_thread_state(
+    payload: ThreadPostRequest,
     opengpts_user_id: OpengptsUserId,
     tid: ThreadID,
-    payload: ThreadMessagesPostRequest,
 ):
     """Add messages to a thread."""
-    return await storage.post_thread_messages(opengpts_user_id, tid, payload.messages)
+    return await storage.update_thread_state(
+        payload.config or {"configurable": {"thread_id": tid}}, payload.values
+    )
 
 
 @router.get("/{tid}/history")
diff --git a/backend/app/checkpoint.py b/backend/app/checkpoint.py
index 88df9433..9e4681b4 100644
--- a/backend/app/checkpoint.py
+++ b/backend/app/checkpoint.py
@@ -1,10 +1,10 @@
-from datetime import datetime
 import pickle
+from datetime import datetime
 from typing import AsyncIterator, Optional
 
 from langchain_core.runnables import ConfigurableFieldSpec, RunnableConfig
 from langgraph.checkpoint import BaseCheckpointSaver
-from langgraph.checkpoint.base import Checkpoint, CheckpointTuple, CheckpointThreadTs
+from langgraph.checkpoint.base import Checkpoint, CheckpointThreadTs, CheckpointTuple
 
 from app.lifespan import get_pg_pool
 
diff --git a/backend/app/storage.py b/backend/app/storage.py
index bd87bfaa..d8c401b1 100644
--- a/backend/app/storage.py
+++ b/backend/app/storage.py
@@ -1,12 +1,12 @@
 from datetime import datetime, timezone
-from typing import List, Optional, Sequence
+from typing import Any, List, Optional, Sequence, Union
 
 from langchain_core.messages import AnyMessage
+from langchain_core.runnables import RunnableConfig
 
 from app.agent import AgentType, get_agent_executor
 from app.lifespan import get_pg_pool
 from app.schema import Assistant, Thread
-from app.stream import map_chunk_to_msg
 
 
 async def list_assistants(user_id: str) -> List[Assistant]:
@@ -99,37 +99,36 @@ async def get_thread(user_id: str, thread_id: str) -> Optional[Thread]:
         )
 
 
-async def get_thread_messages(user_id: str, thread_id: str):
+async def get_thread_state(user_id: str, thread_id: str):
     """Get all messages for a thread."""
     app = get_agent_executor([], AgentType.GPT_35_TURBO, "", False)
     state = await app.aget_state({"configurable": {"thread_id": thread_id}})
     return {
-        "messages": [map_chunk_to_msg(msg) for msg in state.values],
-        "resumeable": bool(state.next),
+        "values": state.values,
+        "next": state.next,
     }
 
 
-async def post_thread_messages(
-    user_id: str, thread_id: str, messages: Sequence[AnyMessage]
+async def update_thread_state(
+    config: RunnableConfig, messages: Union[Sequence[AnyMessage], dict[str, Any]]
 ):
     """Add messages to a thread."""
     app = get_agent_executor([], AgentType.GPT_35_TURBO, "", False)
-    await app.aupdate_state({"configurable": {"thread_id": thread_id}}, messages)
+    return await app.aupdate_state(config, messages)
 
 
 async def get_thread_history(user_id: str, thread_id: str):
     """Get the history of a thread."""
     app = get_agent_executor([], AgentType.GPT_35_TURBO, "", False)
+    config = {"configurable": {"thread_id": thread_id}}
     return [
         {
-            "values": [map_chunk_to_msg(msg) for msg in c.values],
-            "resumeable": bool(c.next),
+            "values": c.values,
+            "next": c.next,
             "config": c.config,
             "parent": c.parent_config,
         }
-        async for c in app.aget_state_history(
-            {"configurable": {"thread_id": thread_id}}
-        )
+        async for c in app.aget_state_history(config)
     ]
 
 
diff --git a/backend/app/stream.py b/backend/app/stream.py
index 9629cdb9..a894dc75 100644
--- a/backend/app/stream.py
+++ b/backend/app/stream.py
@@ -2,20 +2,7 @@
 from typing import AsyncIterator, Optional, Sequence, Union
 
 import orjson
-from langchain_core.messages import (
-    AIMessage,
-    AIMessageChunk,
-    AnyMessage,
-    BaseMessage,
-    BaseMessageChunk,
-    ChatMessage,
-    ChatMessageChunk,
-    FunctionMessage,
-    FunctionMessageChunk,
-    HumanMessage,
-    HumanMessageChunk,
-    SystemMessage,
-)
+from langchain_core.messages import AnyMessage, SystemMessage, message_chunk_to_message
 from langchain_core.runnables import Runnable, RunnableConfig
 from langserve.serialization import WellKnownLCSerializer
 
@@ -76,22 +63,6 @@ async def astream_messages(
             yield last_messages_list
 
 
-def map_chunk_to_msg(chunk: BaseMessageChunk) -> BaseMessage:
-    if not isinstance(chunk, BaseMessageChunk):
-        return chunk
-    args = {k: v for k, v in chunk.__dict__.items() if k != "type"}
-    if isinstance(chunk, HumanMessageChunk):
-        return HumanMessage(**args)
-    elif isinstance(chunk, AIMessageChunk):
-        return AIMessage(**args)
-    elif isinstance(chunk, FunctionMessageChunk):
-        return FunctionMessage(**args)
-    elif isinstance(chunk, ChatMessageChunk):
-        return ChatMessage(**args)
-    else:
-        raise ValueError(f"Unknown chunk type: {chunk}")
-
-
 _serializer = WellKnownLCSerializer()
 
 
@@ -111,7 +82,7 @@ async def to_sse(messages_stream: MessagesStream) -> AsyncIterator[dict]:
                 yield {
                     "event": "data",
                     "data": _serializer.dumps(
-                        [map_chunk_to_msg(msg) for msg in chunk]
+                        [message_chunk_to_message(msg) for msg in chunk]
                     ).decode(),
                 }
     except Exception:
diff --git a/backend/app/upload.py b/backend/app/upload.py
index e4adc814..3d8c3243 100644
--- a/backend/app/upload.py
+++ b/backend/app/upload.py
@@ -11,7 +11,6 @@
 import os
 from typing import Any, BinaryIO, List, Optional
 
-from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
 from langchain_community.document_loaders.blob_loaders.schema import Blob
 from langchain_community.vectorstores.pgvector import PGVector
 from langchain_core.runnables import (
@@ -21,6 +20,7 @@
 )
 from langchain_core.vectorstores import VectorStore
 from langchain_openai import OpenAIEmbeddings
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
 
 from app.ingest import ingest_blob
 from app.parsing import MIMETYPE_BASED_PARSER
diff --git a/backend/poetry.lock b/backend/poetry.lock
index 5061a20a..a1f57875 100644
--- a/backend/poetry.lock
+++ b/backend/poetry.lock
@@ -1724,17 +1724,16 @@ extended-testing = ["aiosqlite (>=0.19.0,<0.20.0)", "aleph-alpha-client (>=2.15.
 
 [[package]]
 name = "langchain-core"
-version = "0.1.33"
+version = "0.1.36"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_core-0.1.33-py3-none-any.whl", hash = "sha256:cee7fbab114c74b7279a92c8a376b40344b0fa3d0f0af3143a858e3b7485bf13"},
-    {file = "langchain_core-0.1.33.tar.gz", hash = "sha256:545eff3de83cc58231bd2b0c6d672323fc2077b94d326ba1a3219118af1d1a66"},
+    {file = "langchain_core-0.1.36-py3-none-any.whl", hash = "sha256:564beeb18ab13deca8daf6e6e74acab52e0b8f6202110262a4c914e4450febd2"},
+    {file = "langchain_core-0.1.36.tar.gz", hash = "sha256:aa2432370ca3d2a5d6dd14a810aa6488bf2f622ff7a0a3dc30f6e0ed9d7f5fa8"},
 ]
 
 [package.dependencies]
-anyio = ">=3,<5"
 jsonpatch = ">=1.33,<2.0"
 langsmith = ">=0.1.0,<0.2.0"
 packaging = ">=23.2,<24.0"
@@ -1766,17 +1765,17 @@ types-requests = ">=2.31.0,<3.0.0"
 
 [[package]]
 name = "langchain-openai"
-version = "0.0.8"
+version = "0.1.1"
 description = "An integration package connecting OpenAI and LangChain"
 optional = false
-python-versions = ">=3.8.1,<4.0"
+python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_openai-0.0.8-py3-none-any.whl", hash = "sha256:4862fc72cecbee0240aaa6df0234d5893dd30cd33ca23ac5cfdd86c11d2c44df"},
-    {file = "langchain_openai-0.0.8.tar.gz", hash = "sha256:b7aba7fcc52305e78b08197ebc54fc45cc06dbc40ba5b913bc48a22b30a4f5c9"},
+    {file = "langchain_openai-0.1.1-py3-none-any.whl", hash = "sha256:5cf4df5d2550af673337eafedaeec014ba52f9a25aeb8451206ca254bed01e5c"},
+    {file = "langchain_openai-0.1.1.tar.gz", hash = "sha256:d10e9a9fc4c8ea99ca98f23808ce44c7dcdd65354ac07ad10afe874ecf3401ca"},
 ]
 
 [package.dependencies]
-langchain-core = ">=0.1.27,<0.2.0"
+langchain-core = ">=0.1.33,<0.2.0"
 openai = ">=1.10.0,<2.0.0"
 tiktoken = ">=0.5.2,<1"
 
@@ -1829,13 +1828,13 @@ six = "*"
 
 [[package]]
 name = "langgraph"
-version = "0.0.29"
+version = "0.0.30"
 description = "langgraph"
 optional = false
 python-versions = "<4.0,>=3.9.0"
 files = [
-    {file = "langgraph-0.0.29-py3-none-any.whl", hash = "sha256:ebb308f0afeffda6cc929c466aacfca73a7b561d4ba3fc190202c7bd3905702d"},
-    {file = "langgraph-0.0.29.tar.gz", hash = "sha256:12be459587ca7e753f06e94917028d54c7359664e0a04a8cedb0a7b595c4c996"},
+    {file = "langgraph-0.0.30-py3-none-any.whl", hash = "sha256:835d34d66d1ec1cad1825eee682f0c8a85edfd591ab552706a4f4211a3119b88"},
+    {file = "langgraph-0.0.30.tar.gz", hash = "sha256:58bb9faf081fdb4490cda8cef4421b01b64b241df92c5556c327b2c83cfd5e0f"},
 ]
 
 [package.dependencies]
@@ -4166,4 +4165,4 @@ multidict = ">=4.0"
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.9.0,<3.12"
-content-hash = "6aba3d05838348cb038b98803ed0d66e70caaa08a56d5a16fdbea3c5c63ec073"
+content-hash = "0c5b10e8d1e0f0d40cf099327c335613c7a640dccdf8931a8a82977856e4f064"
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index 148ef410..dd16ad2a 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -20,10 +20,10 @@ orjson = "^3.9.10"
 python-multipart = "^0.0.6"
 tiktoken = "^0.5.1"
 langchain = ">=0.0.338"
-langgraph = "^0.0.29"
+langgraph = "^0.0.30"
 pydantic = "<2.0"
 python-magic = "^0.4.27"
-langchain-openai = "^0.0.8"
+langchain-openai = "^0.1.1"
 beautifulsoup4 = "^4.12.3"
 boto3 = "^1.34.28"
 duckduckgo-search = "^4.2"
@@ -42,7 +42,7 @@ unstructured = {extras = ["doc", "docx"], version = "^0.12.5"}
 pgvector = "^0.2.5"
 psycopg2-binary = "^2.9.9"
 asyncpg = "^0.29.0"
-langchain-core = "^0.1.33"
+langchain-core = "^0.1.36"
 
 [tool.poetry.group.dev.dependencies]
 uvicorn = "^0.23.2"
diff --git a/backend/tests/unit_tests/app/test_app.py b/backend/tests/unit_tests/app/test_app.py
index f2bfdc6c..d23ccb67 100644
--- a/backend/tests/unit_tests/app/test_app.py
+++ b/backend/tests/unit_tests/app/test_app.py
@@ -110,9 +110,9 @@ async def test_threads() -> None:
         )
         assert response.status_code == 200, response.text
 
-        response = await client.get(f"/threads/{tid}/messages", headers=headers)
+        response = await client.get(f"/threads/{tid}/state", headers=headers)
         assert response.status_code == 200
-        assert response.json() == {"messages": [], "resumeable": False}
+        assert response.json() == {"values": [], "resumeable": False}
 
         response = await client.get("/threads/", headers=headers)
 
diff --git a/frontend/package.json b/frontend/package.json
index cc40c377..42c0db9e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,6 +2,7 @@
   "name": "frontend",
   "private": true,
   "version": "0.0.0",
+  "packageManager": "yarn@1.22.19",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -11,9 +12,12 @@
     "format": "prettier -w src"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@mui/material": "^5.15.14",
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.10",
     "clsx": "^2.0.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index df449b19..c06ba8a1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,7 +4,11 @@ import { Chat } from "./components/Chat";
 import { ChatList } from "./components/ChatList";
 import { Layout } from "./components/Layout";
 import { NewChat } from "./components/NewChat";
-import { Chat as ChatType, useChatList } from "./hooks/useChatList";
+import {
+  Chat as ChatType,
+  Message as MessageType,
+  useChatList,
+} from "./hooks/useChatList";
 import { useSchemas } from "./hooks/useSchemas";
 import { useStreamState } from "./hooks/useStreamState";
 import { useConfigList } from "./hooks/useConfigList";
@@ -17,7 +21,13 @@ function App() {
   const { configSchema, configDefaults } = useSchemas();
   const { chats, currentChat, createChat, enterChat } = useChatList();
   const { configs, currentConfig, saveConfig, enterConfig } = useConfigList();
-  const { startStream, stopStream, stream } = useStreamState();
+  const {
+    startStream,
+    stopStream,
+    stream,
+    streamErrorMessage,
+    setStreamErrorMessage,
+  } = useStreamState();
   const [isDocumentRetrievalActive, setIsDocumentRetrievalActive] =
     useState(false);
 
@@ -47,12 +57,24 @@ function App() {
   }, [currentConfig, currentChat, configs]);
 
   const startTurn = useCallback(
-    async (message?: MessageWithFiles, chat: ChatType | null = currentChat) => {
+    async (props: {
+      message?: MessageWithFiles;
+      previousMessages?: MessageType[];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      config?: Record<string, any>;
+      chat?: ChatType | null;
+    }) => {
+      const {
+        message,
+        previousMessages = [],
+        chat = currentChat,
+        config,
+      } = props;
       if (!chat) return;
-      const config = configs?.find(
+      const defaultConfig = configs?.find(
         (c) => c.assistant_id === chat.assistant_id,
       )?.config;
-      if (!config) return;
+      if (!defaultConfig) return;
       const files = message?.files || [];
       if (files.length > 0) {
         const formData = files.reduce((formData, file) => {
@@ -68,9 +90,10 @@ function App() {
           body: formData,
         });
       }
-      await startStream(
-        message
+      await startStream({
+        input: message
           ? [
+              ...previousMessages,
               {
                 content: message.message,
                 additional_kwargs: {},
@@ -78,10 +101,13 @@ function App() {
                 example: false,
               },
             ]
-          : null,
-        chat.assistant_id,
-        chat.thread_id,
-      );
+          : previousMessages.length
+            ? [...previousMessages]
+            : null,
+        assistant_id: chat.assistant_id,
+        thread_id: chat.thread_id,
+        config,
+      });
     },
     [currentChat, startStream, configs],
   );
@@ -93,7 +119,7 @@ function App() {
         message.message,
         currentConfig.assistant_id,
       );
-      return startTurn(message, chat);
+      return startTurn({ message, chat });
     },
     [createChat, startTurn, currentConfig],
   );
@@ -130,6 +156,8 @@ function App() {
       stopStream={stopStream}
       stream={stream}
       isDocumentRetrievalActive={isDocumentRetrievalActive}
+      streamErrorMessage={streamErrorMessage}
+      setStreamErrorMessage={setStreamErrorMessage}
     />
   ) : currentConfig ? (
     <NewChat
diff --git a/frontend/src/assets/EmptyState.svg b/frontend/src/assets/EmptyState.svg
new file mode 100644
index 00000000..ba37810b
--- /dev/null
+++ b/frontend/src/assets/EmptyState.svg
@@ -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>
diff --git a/frontend/src/components/AutosizeTextarea.tsx b/frontend/src/components/AutosizeTextarea.tsx
new file mode 100644
index 00000000..ee0b0b89
--- /dev/null
+++ b/frontend/src/components/AutosizeTextarea.tsx
@@ -0,0 +1,60 @@
+import { Ref } from "react";
+import { cn } from "../utils/cn";
+
+const COMMON_CLS = cn(
+  "text-sm col-[1] row-[1] m-0 resize-none overflow-hidden whitespace-pre-wrap break-words bg-transparent px-2 py-1 rounded shadow-none",
+);
+
+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;
+  fullHeight?: boolean;
+}) {
+  return (
+    <div
+      className={
+        cn("grid w-full", props.className) +
+        (props.fullHeight ? "" : " max-h-80 overflow-auto ")
+      }
+    >
+      <textarea
+        ref={props.inputRef}
+        id={props.id}
+        className={cn(
+          COMMON_CLS,
+          "text-transparent caret-black rounded focus:outline-0 focus:ring-0",
+        )}
+        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>
+  );
+}
diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index 1ac94f68..2fcf300c 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -1,15 +1,27 @@
-import { useEffect, useRef } from "react";
-import { Chat as ChatType } from "../hooks/useChatList";
+import { useEffect, useRef, useState } from "react";
+import { Chat as ChatType, Message as MessageType } from "../hooks/useChatList";
 import { StreamStateProps } from "../hooks/useStreamState";
 import { useChatMessages } from "../hooks/useChatMessages";
 import TypingBox from "./TypingBox";
 import { Message } from "./Message";
 import { ArrowDownCircleIcon } from "@heroicons/react/24/outline";
 import { MessageWithFiles } from "../utils/formTypes.ts";
+import { useHistories } from "../hooks/useHistories.ts";
+import { Timeline } from "./Timeline.tsx";
+import { deepEquals } from "../utils/equals.ts";
 
-interface ChatProps extends Pick<StreamStateProps, "stream" | "stopStream"> {
+interface ChatProps
+  extends Pick<
+    StreamStateProps,
+    "stream" | "stopStream" | "streamErrorMessage" | "setStreamErrorMessage"
+  > {
   chat: ChatType;
-  startStream: (message?: MessageWithFiles) => Promise<void>;
+  startStream: (props: {
+    message?: MessageWithFiles;
+    previousMessages?: MessageType[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    config?: Record<string, any>;
+  }) => Promise<void>;
   isDocumentRetrievalActive: boolean;
 }
 
@@ -22,57 +34,161 @@ function usePrevious<T>(value: T): T | undefined {
 }
 
 export function Chat(props: ChatProps) {
-  const { messages, resumeable } = useChatMessages(
+  const { messages: serverMessages, next } = useChatMessages(
     props.chat.thread_id,
     props.stream,
     props.stopStream,
   );
-  const prevMessages = usePrevious(messages);
+  const { histories } = useHistories(props.chat.thread_id, props.stream);
+  const displayHistories = [...(histories ?? [])]
+    .reverse()
+    .filter((history) => history.next.length)
+    .filter(
+      (history, i, self) => !deepEquals(history.values, self[i - 1]?.values),
+    );
+  const [activeDisplayedHistoryIndex, setActiveDisplayedHistoryIndex] =
+    useState(0);
+  const activeHistory = displayHistories[activeDisplayedHistoryIndex];
+  const [messageEditStatuses, setMessageEditStatuses] = useState<boolean[]>([]);
+  const [localMessages, setLocalMessages] = useState<MessageType[]>([]);
+
+  useEffect(() => {
+    setMessageEditStatuses(localMessages.map(() => false) ?? []);
+  }, [localMessages]);
+  useEffect(() => {
+    setActiveDisplayedHistoryIndex(
+      displayHistories.length > 0 ? displayHistories.length - 1 : 0,
+    );
+  }, [displayHistories.length]);
+  useEffect(() => {
+    const dedupedServerMessages = [
+      ...(serverMessages ?? []),
+    ]; /*.filter((serverMessage, i, self) => {
+      return !self.slice(i + 1).find((msg) => serverMessage.id === msg.id && serverMessage.content === msg.content);
+    });*/
+    setLocalMessages(dedupedServerMessages);
+  }, [serverMessages]);
+  useEffect(
+    () => props.setStreamErrorMessage(null),
+    [activeDisplayedHistoryIndex],
+  );
+
+  const updateMessage = (newMessage: MessageType) => {
+    setLocalMessages((prevLocalMessages) => {
+      const updatedMessageIndex = localMessages.findIndex(
+        (message: MessageType) => message.id === newMessage.id,
+      );
+      return [
+        ...prevLocalMessages.slice(0, updatedMessageIndex),
+        newMessage,
+        ...prevLocalMessages.slice(updatedMessageIndex + 1),
+      ];
+    });
+  };
+  const prevMessages = usePrevious(serverMessages);
   useEffect(() => {
     scrollTo({
       top: document.body.scrollHeight,
       behavior:
-        prevMessages && prevMessages?.length === messages?.length
+        prevMessages && prevMessages?.length === serverMessages?.length
           ? "smooth"
           : undefined,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messages]);
+  }, [serverMessages]);
   return (
-    <div className="flex-1 flex flex-col items-stretch pb-[76px] pt-2">
-      {messages?.map((msg, i) => (
-        <Message
-          {...msg}
-          key={i}
-          runId={
-            i === messages.length - 1 && props.stream?.status === "done"
-              ? props.stream?.run_id
-              : undefined
-          }
-        />
-      ))}
-      {(props.stream?.status === "inflight" || messages === null) && (
-        <div className="leading-6 mb-2 animate-pulse font-black text-gray-400 text-lg">
+    <div className="flex-1 flex flex-col items-stretch pb-[76px] pt-2 mb-16">
+      <div className="flex flex-col">
+        {[...localMessages].map((msg, i) => (
+          <Message
+            {...msg}
+            key={`${msg.id}:${msg.content}`}
+            editMode={messageEditStatuses[i]}
+            setEditMode={(newValue) => {
+              setMessageEditStatuses((prevStatuses) => {
+                const newStatuses = [...prevStatuses];
+                newStatuses[i] = newValue;
+                return newStatuses;
+              });
+            }}
+            onUpdate={updateMessage}
+            runId={
+              activeDisplayedHistoryIndex === displayHistories.length - 1 &&
+              i === (activeHistory?.values ?? []).length - 1 &&
+              props.stream?.status === "done"
+                ? props.stream?.run_id
+                : undefined
+            }
+          />
+        ))}
+      </div>
+      {(props.stream?.status === "inflight" || localMessages == null) && (
+        <div className="leading-6 mb-2 animate-pulse font-black text-gray-400 text-2xl mx-auto">
           ...
         </div>
       )}
-      {props.stream?.status === "error" && (
+      {(props.streamErrorMessage || props.stream?.status === "error") && (
         <div className="flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">
-          An error has occurred. Please try again.
+          {props.streamErrorMessage ??
+            "An error has occurred. Please try again."}
         </div>
       )}
-      {resumeable && props.stream?.status !== "inflight" && (
-        <div
-          className="flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-800 ring-1 ring-inset ring-yellow-600/20 cursor-pointer"
-          onClick={() => props.startStream()}
-        >
-          <ArrowDownCircleIcon className="h-5 w-5 mr-1" />
-          Click to continue.
-        </div>
-      )}
-      <div className="fixed left-0 lg:left-72 bottom-0 right-0 p-4">
+      {next.length > 0 &&
+        activeDisplayedHistoryIndex === displayHistories.length - 1 &&
+        props.stream?.status !== "inflight" && (
+          <div
+            className="flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-800 ring-1 ring-inset ring-yellow-600/20 cursor-pointer"
+            onClick={async () => {
+              if (localMessages.length) {
+                const body = JSON.stringify({
+                  messages: [...(localMessages ?? [])],
+                });
+                const res = await fetch(
+                  `/threads/${props.chat.thread_id}/state`,
+                  {
+                    method: "POST",
+                    headers: {
+                      Accept: "application/json",
+                      "Content-Type": "application/json",
+                    },
+                    body,
+                  },
+                );
+                const json = await res.json();
+                if (!res.ok) {
+                  props.setStreamErrorMessage(
+                    json.detail ?? "Unspecified error.",
+                  );
+                  return;
+                }
+              }
+
+              props.startStream({});
+            }}
+          >
+            <ArrowDownCircleIcon className="h-5 w-5 mr-1" />
+            Permit tool execution.
+          </div>
+        )}
+      <div className="fixed left-0 lg:left-72 bottom-0 right-0 p-4 bg-gray-100">
+        <Timeline
+          disabled={props.stream?.status === "inflight"}
+          histories={displayHistories}
+          activeHistoryIndex={activeDisplayedHistoryIndex}
+          onChange={(newValue: number) => {
+            setLocalMessages([...(displayHistories[newValue]?.values ?? [])]);
+            setActiveDisplayedHistoryIndex(newValue);
+          }}
+        ></Timeline>
         <TypingBox
-          onSubmit={props.startStream}
+          disabled={messageEditStatuses.find((status) => status)}
+          onSubmit={(dataWithFiles) => {
+            return props.startStream({
+              message: dataWithFiles,
+              previousMessages: [...(localMessages ?? [])],
+              config: { ...activeHistory?.config },
+            });
+          }}
           onInterrupt={
             props.stream?.status === "inflight" ? props.stopStream : undefined
           }
diff --git a/frontend/src/components/Message.tsx b/frontend/src/components/Message.tsx
index 026cfd3e..d337b519 100644
--- a/frontend/src/components/Message.tsx
+++ b/frontend/src/components/Message.tsx
@@ -1,12 +1,24 @@
 import { memo, useState } from "react";
-import { Message as MessageType } from "../hooks/useChatList";
+import { v4 as uuidv4 } from "uuid";
+import type {
+  FunctionDefinition,
+  Message as MessageType,
+} from "../hooks/useChatList";
 import { str } from "../utils/str";
 import { cn } from "../utils/cn";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import {
+  ArrowUturnLeftIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  PencilSquareIcon,
+  PlusCircleIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import { LangSmithActions } from "./LangSmithActions";
 import { DocumentList } from "./Document";
+import { AutosizeTextarea } from "./AutosizeTextarea";
 
 function tryJsonParse(value: string) {
   try {
@@ -19,26 +31,47 @@ function tryJsonParse(value: string) {
 function Function(props: {
   call: boolean;
   name?: string;
-  args?: string;
+  onNameChange?: (newValue: string) => void;
+  argsEntries?: [string, unknown][];
+  onArgsEntriesChange?: (newValue: [string, unknown][]) => void;
+  onRemovePressed?: () => void;
   open?: boolean;
+  editMode?: boolean;
   setOpen?: (open: boolean) => void;
 }) {
   return (
-    <>
-      {props.call && (
-        <span className="text-gray-900 whitespace-pre-wrap break-words mr-2">
-          Use
-        </span>
-      )}
-      {props.name && (
-        <span className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 relative -top-[1px] mr-2">
-          {props.name}
-        </span>
-      )}
+    <div className="flex flex-col mt-1">
+      <div className="flex w-full">
+        <div className="flex flex-col">
+          {props.call && (
+            <span className="text-gray-900 whitespace-pre-wrap break-words mr-2 uppercase opacity-50 text-xs mb-1">
+              Tool:
+            </span>
+          )}
+          {props.name !== undefined &&
+            (!props.editMode ? (
+              <span className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 relative -top-[1px] mr-auto">
+                {props.name}
+              </span>
+            ) : (
+              <input
+                onChange={(e) => props.onNameChange?.(e.target.value)}
+                className="rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 -top-[1px] mr-auto focus:ring-0"
+                value={props.name}
+              />
+            ))}
+        </div>
+        {props.editMode && (
+          <TrashIcon
+            className="w-4 h-4 ml-2 cursor-pointer opacity-50 ml-auto"
+            onClick={props.onRemovePressed}
+          />
+        )}
+      </div>
       {!props.call && props.setOpen && (
         <span
           className={cn(
-            "inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 cursor-pointer relative top-1",
+            "mr-auto inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 cursor-pointer relative top-1",
             props.open && "mb-2",
           )}
           onClick={(e) => {
@@ -52,112 +85,439 @@ function Function(props: {
           />
         </span>
       )}
-      {props.args && (
-        <div className="text-gray-900 my-2 whitespace-pre-wrap break-words">
+      {props.argsEntries && (
+        <div className="text-gray-900 whitespace-pre-wrap break-words">
+          <span className="text-gray-900 whitespace-pre-wrap break-words mr-2 uppercase text-xs opacity-50">
+            Arguments:
+          </span>
           <div className="ring-1 ring-gray-300 rounded">
-            <table className="divide-y divide-gray-300">
+            <table className="mt-0 divide-gray-300">
               <tbody>
-                {Object.entries(tryJsonParse(props.args)).map(
-                  ([key, value], i) => (
-                    <tr key={i}>
-                      <td
-                        className={cn(
-                          i === 0 ? "" : "border-t border-transparent",
-                          "py-1 px-3 table-cell text-sm border-r border-r-gray-300",
-                        )}
-                      >
+                {props.argsEntries.map(([key, value], i) => (
+                  <tr key={i}>
+                    <td
+                      className={cn(
+                        i === 0 ? "" : "border-t border-transparent",
+                        "py-1 px-3 table-cell text-sm border-r border-r-gray-300 w-0 min-w-[128px]",
+                      )}
+                    >
+                      {props.editMode ? (
+                        <input
+                          className="rounded-md font-medium text-sm text-gray-500 px-2 py-1 focus:ring-0"
+                          value={key}
+                          onChange={(e) => {
+                            if (props.argsEntries !== undefined) {
+                              props.onArgsEntriesChange?.([
+                                ...props.argsEntries.slice(0, i),
+                                [e.target.value, value],
+                                ...props.argsEntries.slice(i + 1),
+                              ]);
+                            }
+                          }}
+                        />
+                      ) : (
                         <div className="font-medium text-gray-500">{key}</div>
-                      </td>
-                      <td
-                        className={cn(
-                          i === 0 ? "" : "border-t border-gray-200",
-                          "py-1 px-3 table-cell",
-                        )}
-                      >
-                        {str(value)}
-                      </td>
-                    </tr>
-                  ),
+                      )}
+                    </td>
+                    <td
+                      className={cn(
+                        i === 0 ? "" : "border-t border-gray-200",
+                        "py-1 px-3 table-cell",
+                      )}
+                    >
+                      {props.editMode ? (
+                        <div className="flex items-center">
+                          <AutosizeTextarea
+                            className="py-0 px-0 prose text-sm leading-normal bg-white"
+                            value={str(value)?.toString()}
+                            onChange={(newValue) => {
+                              if (props.argsEntries !== undefined) {
+                                props.onArgsEntriesChange?.([
+                                  ...props.argsEntries.slice(0, i),
+                                  [key, newValue],
+                                  ...props.argsEntries.slice(i + 1),
+                                ]);
+                              }
+                            }}
+                          />
+                          <TrashIcon
+                            className="w-4 h-4 ml-2 cursor-pointer opacity-50"
+                            onClick={() => {
+                              if (props.argsEntries !== undefined) {
+                                props.onArgsEntriesChange?.([
+                                  ...props.argsEntries.slice(0, i),
+                                  ...props.argsEntries.slice(i + 1),
+                                ]);
+                              }
+                            }}
+                          />
+                        </div>
+                      ) : (
+                        str(value)
+                      )}
+                    </td>
+                  </tr>
+                ))}
+                {props.editMode && (
+                  <tr>
+                    <td></td>
+                    <td className="px-3 py-2">
+                      <PlusCircleIcon
+                        className="ml-auto w-6 h-6 cursor-pointer opacity-50"
+                        onClick={() => {
+                          if (props.argsEntries === undefined) {
+                            return;
+                          }
+                          props.onArgsEntriesChange?.([
+                            ...props.argsEntries,
+                            ["", ""],
+                          ]);
+                        }}
+                      />
+                    </td>
+                  </tr>
                 )}
               </tbody>
             </table>
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }
 
+function initializeFunctionArgsEntries(definition: FunctionDefinition) {
+  return definition.arguments !== undefined
+    ? Object.entries(tryJsonParse(definition.arguments))
+    : undefined;
+}
+
+function initializeToolCallFunctionArgsEntries(
+  toolCalls: { function?: FunctionDefinition }[],
+) {
+  return toolCalls
+    .map((toolCall) => {
+      if (toolCall.function !== undefined) {
+        return initializeFunctionArgsEntries(toolCall.function ?? "{}");
+      } else {
+        return [];
+      }
+    })
+    .filter((args): args is [string, unknown][] => args !== undefined);
+}
+
 export const Message = memo(function Message(
-  props: MessageType & { runId?: string },
+  props: MessageType & {
+    runId?: string;
+    isLast?: boolean;
+    editMode: boolean;
+    setEditMode: (newValue: boolean) => void;
+    onUpdate: (newValue: MessageType) => void;
+    onRewindPressed: () => void;
+  },
 ) {
+  const { runId, onUpdate, ...messageProps } = props;
+  const [functionArgsEntries, setFunctionArgsEntries] = useState(
+    messageProps.additional_kwargs?.function_call?.arguments !== undefined
+      ? initializeFunctionArgsEntries(
+          messageProps.additional_kwargs.function_call,
+        )
+      : undefined,
+  );
+  const [toolCallFunctionArgsEntries, setToolCallFunctionArgsEntries] =
+    useState(
+      messageProps.additional_kwargs?.tool_calls !== undefined
+        ? initializeToolCallFunctionArgsEntries(
+            messageProps.additional_kwargs.tool_calls,
+          )
+        : undefined,
+    );
+  const [messageData, setMessageData] = useState<MessageType>(() => ({
+    ...messageProps,
+  }));
   const [open, setOpen] = useState(false);
   const contentIsDocuments =
-    ["function", "tool"].includes(props.type) &&
-    Array.isArray(props.content) &&
-    props.content.every((d) => !!d.page_content);
+    ["function", "tool"].includes(messageData.type) &&
+    Array.isArray(messageData.content) &&
+    messageData.content.every((d) => !!d.page_content);
+
+  const finishEditing = () => {
+    props.setEditMode(false);
+    const updatedMessageData = { ...messageData };
+    if (
+      updatedMessageData.additional_kwargs?.function_call !== undefined &&
+      functionArgsEntries !== undefined
+    ) {
+      updatedMessageData.additional_kwargs.function_call = {
+        ...updatedMessageData.additional_kwargs.function_call,
+        arguments: JSON.stringify(Object.fromEntries(functionArgsEntries)),
+      };
+      setFunctionArgsEntries(
+        initializeFunctionArgsEntries(
+          updatedMessageData.additional_kwargs.function_call,
+        ),
+      );
+    }
+    if (
+      updatedMessageData.additional_kwargs?.tool_calls !== undefined &&
+      toolCallFunctionArgsEntries !== undefined
+    ) {
+      updatedMessageData.additional_kwargs.tool_calls =
+        updatedMessageData.additional_kwargs.tool_calls.map((toolCall, i) => {
+          if (toolCallFunctionArgsEntries[i] !== undefined) {
+            return {
+              ...toolCall,
+              function: {
+                ...toolCall.function,
+                arguments: JSON.stringify(
+                  Object.fromEntries(
+                    toolCallFunctionArgsEntries[i]!.filter(
+                      ([key]) => key?.length > 0,
+                    ),
+                  ),
+                ),
+              },
+            };
+          } else {
+            return toolCall;
+          }
+        });
+      setToolCallFunctionArgsEntries(
+        initializeToolCallFunctionArgsEntries(
+          updatedMessageData.additional_kwargs.tool_calls,
+        ),
+      );
+    }
+    onUpdate?.(updatedMessageData);
+  };
   return (
-    <div className="flex flex-col mb-8">
+    <div className="flex flex-col mb-8 group">
       <div className="leading-6 flex flex-row">
         <div
           className={cn(
             "font-medium text-sm text-gray-400 uppercase mr-2 mt-1 w-28 flex flex-col",
-            props.type === "function" && "mt-2",
+            messageData.type === "function" && "mt-2",
           )}
         >
-          {props.type}
+          {messageData.type}
         </div>
-        <div className="flex-1">
-          {["function", "tool"].includes(props.type) && (
+        <div className="prose flex flex-col w-[65ch]">
+          {(
+            ["function", "tool"].includes(messageData.type) &&
+            !contentIsDocuments
+              ? open
+              : true
+          ) ? (
+            typeof messageData.content === "string" ? (
+              <>
+                {props.editMode ? (
+                  <>
+                    <AutosizeTextarea
+                      onChange={(newValue) =>
+                        setMessageData((prev) => ({
+                          ...prev,
+                          content: newValue,
+                        }))
+                      }
+                      onKeyDown={(e) => {
+                        if (!e.metaKey && e.key === "Enter") {
+                          e.preventDefault();
+                          finishEditing();
+                        }
+                      }}
+                      className="text-gray-900 text-md leading-normal prose min-w-[65ch] bg-white mb-4"
+                      value={messageData.content}
+                    />
+                  </>
+                ) : (
+                  <div
+                    className="text-gray-900 prose min-w-[65ch]"
+                    dangerouslySetInnerHTML={{
+                      __html: DOMPurify.sanitize(
+                        marked(messageData.content),
+                      ).trim(),
+                    }}
+                  />
+                )}
+              </>
+            ) : contentIsDocuments ? (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              <DocumentList documents={messageData.content as any} />
+            ) : (
+              <div className="text-gray-900 prose">
+                {str(messageData.content)}
+              </div>
+            )
+          ) : (
+            false
+          )}
+          {["function", "tool"].includes(messageData.type) && (
             <Function
               call={false}
-              name={props.name ?? props.additional_kwargs?.name}
+              onNameChange={(newValue) => {
+                if (messageData.name !== undefined) {
+                  setMessageData((prev) => ({ ...prev, name: newValue }));
+                } else if (messageData.additional_kwargs !== undefined) {
+                  setMessageData((prev) => {
+                    const updatedMessage = { ...prev };
+                    if (updatedMessage.additional_kwargs?.name !== undefined) {
+                      updatedMessage.additional_kwargs.name = newValue;
+                    }
+                    return updatedMessage;
+                  });
+                }
+              }}
+              editMode={props.editMode}
+              name={messageData.name ?? messageData.additional_kwargs?.name}
               open={open}
               setOpen={contentIsDocuments ? undefined : setOpen}
             />
           )}
-          {props.additional_kwargs?.function_call && (
+          {messageData.additional_kwargs?.function_call && (
             <Function
               call={true}
-              name={props.additional_kwargs.function_call.name}
-              args={props.additional_kwargs.function_call.arguments}
+              onNameChange={(newValue) => {
+                setMessageData((prev) => {
+                  const updatedMessage = { ...prev };
+                  if (
+                    updatedMessage.additional_kwargs?.function_call !==
+                    undefined
+                  ) {
+                    updatedMessage.additional_kwargs.function_call.name =
+                      newValue;
+                  }
+                  return updatedMessage;
+                });
+              }}
+              argsEntries={functionArgsEntries}
+              onArgsEntriesChange={setFunctionArgsEntries}
+              editMode={props.editMode}
+              name={messageData.additional_kwargs.function_call.name}
             />
           )}
-          {props.additional_kwargs?.tool_calls
-            ?.filter((call) => call.function)
-            ?.map((call) => (
+          {messageData.additional_kwargs?.tool_calls?.map((call, i) => {
+            if (call.function === undefined) {
+              return <></>;
+            }
+            return (
               <Function
+                key={i}
                 call={true}
-                name={call.function?.name}
-                args={call.function?.arguments}
-              />
-            ))}
-          {(
-            ["function", "tool"].includes(props.type) && !contentIsDocuments
-              ? open
-              : true
-          ) ? (
-            typeof props.content === "string" ? (
-              <div
-                className="text-gray-900 prose"
-                dangerouslySetInnerHTML={{
-                  __html: DOMPurify.sanitize(marked(props.content)).trim(),
+                onNameChange={(newValue) => {
+                  setMessageData((prev) => {
+                    const updatedMessage = { ...prev };
+                    if (
+                      updatedMessage.additional_kwargs?.tool_calls?.[i]
+                        .function !== undefined
+                    ) {
+                      updatedMessage.additional_kwargs.tool_calls[
+                        i
+                      ].function!.name = newValue;
+                    }
+                    return updatedMessage;
+                  });
+                }}
+                argsEntries={toolCallFunctionArgsEntries?.[i]}
+                onArgsEntriesChange={(newValue) =>
+                  setToolCallFunctionArgsEntries((prev) => {
+                    if (prev !== undefined) {
+                      return [
+                        ...prev.slice(0, i),
+                        newValue,
+                        ...prev.slice(i + 1),
+                      ];
+                    }
+                    return prev;
+                  })
+                }
+                onRemovePressed={() => {
+                  setMessageData((prev) => {
+                    const newToolCalls = [
+                      ...(prev.additional_kwargs?.tool_calls ?? []).slice(0, i),
+                      ...(prev.additional_kwargs?.tool_calls ?? []).slice(
+                        i + 1,
+                      ),
+                    ];
+                    const newMessageData = {
+                      ...prev,
+                      additional_kwargs: {
+                        ...prev.additional_kwargs,
+                        tool_calls:
+                          newToolCalls.length > 0 ? newToolCalls : undefined,
+                      },
+                    };
+                    return newMessageData;
+                  });
+                  setToolCallFunctionArgsEntries((prev) => {
+                    if (prev !== undefined) {
+                      return [...prev.slice(0, i), ...prev.slice(i + 1)];
+                    }
+                    return prev;
+                  });
                 }}
+                editMode={props.editMode}
+                name={call.function?.name ?? ""}
               />
-            ) : contentIsDocuments ? (
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              <DocumentList documents={props.content as any} />
-            ) : (
-              <div className="text-gray-900 prose">{str(props.content)}</div>
-            )
-          ) : (
-            false
+            );
+          })}
+          {messageData.type === "ai" && props.editMode && (
+            <div
+              className="flex items-center ml-auto mt-4 cursor-pointer opacity-50"
+              onClick={() => {
+                setMessageData((prev) => {
+                  const newMessageData = {
+                    ...prev,
+                    additional_kwargs: {
+                      ...prev.additional_kwargs,
+                      tool_calls: [
+                        ...(prev.additional_kwargs?.tool_calls ?? []),
+                        {
+                          id: uuidv4(),
+                          type: "function",
+                          index: (prev.additional_kwargs?.tool_calls ?? [])
+                            .length,
+                          function: {
+                            name: "",
+                            arguments: "",
+                          },
+                        },
+                      ],
+                    },
+                  };
+                  return newMessageData;
+                });
+                setToolCallFunctionArgsEntries((prev) => {
+                  return [...(prev || []), [["", ""]]];
+                });
+              }}
+            >
+              <PlusCircleIcon className="w-4 h-4" />
+              <span className="text-sm ml-1">Add tool call</span>
+            </div>
           )}
         </div>
+        <ArrowUturnLeftIcon
+          className={cn(
+            "w-6 h-6 ml-2 opacity-0 group-hover:opacity-50 transition-opacity cursor-pointer",
+            props.editMode ? " invisible pointer-events-none" : "",
+          )}
+          onMouseUp={props.onRewindPressed}
+        />
+        {props.editMode ? (
+          <CheckCircleIcon
+            className="w-6 h-6 cursor-pointer ml-2 shrink-0 opacity-0 group-hover:opacity-50 transition-opacity duration-200"
+            onMouseUp={finishEditing}
+          />
+        ) : (
+          <PencilSquareIcon
+            className="w-6 h-6 cursor-pointer ml-2 shrink-0 opacity-0 group-hover:opacity-50 transition-opacity duration-200"
+            onMouseUp={() => props.setEditMode(true)}
+          />
+        )}
       </div>
-      {props.runId && (
-        <div className="mt-2 pl-[120px]">
-          <LangSmithActions runId={props.runId} />
+      {runId && (
+        <div className="mt-2 pl-6">
+          <LangSmithActions runId={runId} />
         </div>
       )}
     </div>
diff --git a/frontend/src/components/Timeline.tsx b/frontend/src/components/Timeline.tsx
new file mode 100644
index 00000000..1d4796e8
--- /dev/null
+++ b/frontend/src/components/Timeline.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Slider } from "@mui/material";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClockIcon,
+} from "@heroicons/react/24/outline";
+import { cn } from "../utils/cn";
+import { History } from "../hooks/useHistories";
+
+export function Timeline(props: {
+  disabled: boolean;
+  histories: History[];
+  activeHistoryIndex: number;
+  onChange?: (newValue: number) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div className="flex items-center">
+      <button
+        className="flex items-center p-2 text-sm"
+        type="submit"
+        disabled={props.disabled}
+        onClick={() => setExpanded((expanded) => !expanded)}
+      >
+        <ClockIcon className="h-4 w-4 mr-1 rounded-md shrink-0" />
+        <span className="text-gray-900 font-semibold shrink-0">
+          Time travel
+        </span>
+      </button>
+      <Slider
+        className={cn(
+          "w-full shrink transition-max-width duration-200",
+          expanded ? " ml-8 mr-8 max-w-full" : " invisible max-w-0",
+        )}
+        aria-label="Timeline"
+        value={props.activeHistoryIndex}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange={(e) => props.onChange?.((e.target as any).value)}
+        valueLabelDisplay="auto"
+        step={1}
+        marks
+        min={0}
+        max={props.histories.length - 1}
+      />
+      {expanded ? (
+        <ChevronLeftIcon
+          className="h-4 w-4 cursor-pointer shrink-0 mr-4"
+          onClick={() => setExpanded((expanded) => !expanded)}
+        />
+      ) : (
+        <ChevronRightIcon
+          className="h-4 w-4 cursor-pointer shrink-0 mr-4"
+          onClick={() => setExpanded((expanded) => !expanded)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/TypingBox.tsx b/frontend/src/components/TypingBox.tsx
index 6097c87e..ceb9c3c2 100644
--- a/frontend/src/components/TypingBox.tsx
+++ b/frontend/src/components/TypingBox.tsx
@@ -46,7 +46,8 @@ export default function TypingBox(props: {
   onSubmit: (data: MessageWithFiles) => Promise<void>;
   onInterrupt?: () => void;
   inflight?: boolean;
-  isDocumentRetrievalActive: boolean;
+  disabled?: boolean;
+  isDocumentRetrievalActive?: boolean;
 }) {
   const [inflight, setInflight] = useState(false);
   const isInflight = props.inflight || inflight;
@@ -158,7 +159,7 @@ export default function TypingBox(props: {
         </div>
         <button
           type="submit"
-          disabled={isInflight && !props.onInterrupt}
+          disabled={props.disabled || (isInflight && !props.onInterrupt)}
           onClick={
             props.onInterrupt
               ? (e) => {
@@ -170,7 +171,8 @@ export default function TypingBox(props: {
           className={cn(
             "relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 " +
               "py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 bg-white",
-            isInflight && !props.onInterrupt && "opacity-50 cursor-not-allowed",
+            (props.disabled || (isInflight && !props.onInterrupt)) &&
+              "opacity-50 cursor-not-allowed",
           )}
         >
           {props.onInterrupt ? (
diff --git a/frontend/src/hooks/useChatList.ts b/frontend/src/hooks/useChatList.ts
index b4360f74..a98396c0 100644
--- a/frontend/src/hooks/useChatList.ts
+++ b/frontend/src/hooks/useChatList.ts
@@ -2,7 +2,13 @@ import { useCallback, useEffect, useReducer, useState } from "react";
 import orderBy from "lodash/orderBy";
 import { v4 as uuidv4 } from "uuid";
 
+export interface FunctionDefinition {
+  name?: string;
+  arguments?: string;
+}
+
 export interface Message {
+  id?: string;
   type: string;
   content:
     | string
@@ -11,15 +17,9 @@ export interface Message {
   name?: string;
   additional_kwargs?: {
     name?: string;
-    function_call?: {
-      name?: string;
-      arguments?: string;
-    };
+    function_call?: FunctionDefinition;
     tool_calls?: {
-      function?: {
-        name?: string;
-        arguments?: string;
-      };
+      function?: FunctionDefinition;
     }[];
   };
   example: boolean;
diff --git a/frontend/src/hooks/useChatMessages.ts b/frontend/src/hooks/useChatMessages.ts
index 048e08fb..75a16a7b 100644
--- a/frontend/src/hooks/useChatMessages.ts
+++ b/frontend/src/hooks/useChatMessages.ts
@@ -2,16 +2,13 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Message } from "./useChatList";
 import { StreamState } from "./useStreamState";
 
-async function getMessages(threadId: string) {
-  const { messages, resumeable } = await fetch(
-    `/threads/${threadId}/messages`,
-    {
-      headers: {
-        Accept: "application/json",
-      },
+async function getState(threadId: string) {
+  const { values, next } = await fetch(`/threads/${threadId}/state`, {
+    headers: {
+      Accept: "application/json",
     },
-  ).then((r) => r.json());
-  return { messages, resumeable };
+  }).then((r) => r.json());
+  return { values, next };
 }
 
 function usePrevious<T>(value: T): T | undefined {
@@ -26,17 +23,21 @@ export function useChatMessages(
   threadId: string | null,
   stream: StreamState | null,
   stopStream?: (clear?: boolean) => void,
-): { messages: Message[] | null; resumeable: boolean } {
+): {
+  messages: Message[] | null;
+  setMessages: React.Dispatch<React.SetStateAction<Message[] | null>>;
+  next: string[];
+} {
   const [messages, setMessages] = useState<Message[] | null>(null);
-  const [resumeable, setResumeable] = useState(false);
+  const [next, setNext] = useState<string[]>([]);
   const prevStreamStatus = usePrevious(stream?.status);
 
   useEffect(() => {
     async function fetchMessages() {
       if (threadId) {
-        const { messages, resumeable } = await getMessages(threadId);
-        setMessages(messages);
-        setResumeable(resumeable);
+        const { values, next } = await getState(threadId);
+        setMessages(values);
+        setNext(next);
       }
     }
 
@@ -50,28 +51,28 @@ export function useChatMessages(
   useEffect(() => {
     async function fetchMessages() {
       if (threadId) {
-        const { messages, resumeable } = await getMessages(threadId);
-        setMessages(messages);
-        setResumeable(resumeable);
+        const { values, next } = await getState(threadId);
+        setMessages(values);
+        setNext(next);
         stopStream?.(true);
       }
     }
 
     if (prevStreamStatus === "inflight" && stream?.status !== "inflight") {
-      setResumeable(false);
+      setNext([]);
       fetchMessages();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stream?.status]);
 
-  return useMemo(
-    () => ({
+  const memoizedValues = useMemo(() => {
+    return {
       messages: stream?.merge
         ? [...(messages ?? []), ...(stream.messages ?? [])]
         : stream?.messages ?? messages,
-      resumeable,
-    }),
-    [messages, stream?.merge, stream?.messages, resumeable],
-  );
+      next,
+    };
+  }, [messages, stream?.merge, stream?.messages, next]);
+  return { ...memoizedValues, setMessages };
 }
diff --git a/frontend/src/hooks/useHistories.ts b/frontend/src/hooks/useHistories.ts
new file mode 100644
index 00000000..e46dc487
--- /dev/null
+++ b/frontend/src/hooks/useHistories.ts
@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { Message as MessageType } from "./useChatList";
+import { StreamState } from "./useStreamState";
+
+async function getHistories(threadId: string) {
+  const response = await fetch(`/threads/${threadId}/history`, {
+    headers: {
+      Accept: "application/json",
+    },
+  }).then((r) => r.json());
+  return response;
+}
+
+export interface History {
+  values: MessageType[];
+  next: string[];
+  config: Record<string, unknown>;
+}
+
+export function useHistories(
+  threadId: string | null,
+  stream: StreamState | null,
+): {
+  histories: History[];
+  setHistories: React.Dispatch<React.SetStateAction<History[]>>;
+} {
+  const [histories, setHistories] = useState<History[]>([]);
+
+  useEffect(() => {
+    async function fetchHistories() {
+      if (threadId) {
+        const histories = await getHistories(threadId);
+        setHistories(histories);
+      }
+    }
+    fetchHistories();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [threadId, stream?.status]);
+
+  return { histories, setHistories };
+}
diff --git a/frontend/src/hooks/useStreamState.tsx b/frontend/src/hooks/useStreamState.tsx
index 9d25d94f..872daef2 100644
--- a/frontend/src/hooks/useStreamState.tsx
+++ b/frontend/src/hooks/useStreamState.tsx
@@ -11,33 +11,43 @@ export interface StreamState {
 
 export interface StreamStateProps {
   stream: StreamState | null;
-  startStream: (
-    input: Message[] | null,
-    assistant_id: string,
-    thread_id: string,
-  ) => Promise<void>;
+  startStream: (props: {
+    input: Message[] | any | null;
+    assistant_id: string;
+    thread_id: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    config?: Record<string, any>;
+  }) => Promise<void>;
   stopStream?: (clear?: boolean) => void;
+  setStreamStateStatus: (status: "inflight" | "error" | "done") => void;
+  streamErrorMessage: string | null;
+  setStreamErrorMessage: (message: string | null) => void;
 }
 
 export function useStreamState(): StreamStateProps {
   const [current, setCurrent] = useState<StreamState | null>(null);
   const [controller, setController] = useState<AbortController | null>(null);
+  const [streamErrorMessage, setStreamErrorMessage] = useState<string | null>(
+    null,
+  );
 
   const startStream = useCallback(
-    async (
-      input: Message[] | null,
-      assistant_id: string,
-      thread_id: string,
-    ) => {
+    async (props: {
+      input: Message[] | null;
+      assistant_id: string;
+      thread_id: string;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      config?: Record<string, any>;
+    }) => {
+      const { input, assistant_id, thread_id, config } = props;
       const controller = new AbortController();
       setController(controller);
-      setCurrent({ status: "inflight", messages: input || [], merge: true });
-
+      setCurrent({ status: "inflight", messages: input || [], merge: false });
       await fetchEventSource("/runs/stream", {
         signal: controller.signal,
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ input, assistant_id, thread_id }),
+        body: JSON.stringify({ input, assistant_id, thread_id, config }),
         openWhenHidden: true,
         onmessage(msg) {
           if (msg.event === "data") {
@@ -61,6 +71,7 @@ export function useStreamState(): StreamStateProps {
               messages: current?.messages,
               run_id: current?.run_id,
             }));
+            setStreamErrorMessage("Error received while streaming output.");
           }
         },
         onclose() {
@@ -79,6 +90,7 @@ export function useStreamState(): StreamStateProps {
             run_id: current?.run_id,
             merge: current?.merge,
           }));
+          setStreamErrorMessage("Error in stream.");
           setController(null);
           throw error;
         },
@@ -108,9 +120,15 @@ export function useStreamState(): StreamStateProps {
     [controller],
   );
 
+  const setStreamStateStatus = (value: "inflight" | "error" | "done") =>
+    setCurrent((current) => ({ ...current, status: value }));
+
   return {
     startStream,
     stopStream,
     stream: current,
+    setStreamStateStatus,
+    streamErrorMessage,
+    setStreamErrorMessage,
   };
 }
diff --git a/frontend/src/utils/equals.ts b/frontend/src/utils/equals.ts
new file mode 100644
index 00000000..a018d6dc
--- /dev/null
+++ b/frontend/src/utils/equals.ts
@@ -0,0 +1,39 @@
+export function deepEquals(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  a: Record<string, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  b: Record<string, any>,
+): boolean {
+  if (a === b) return true;
+
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  ) {
+    return false;
+  }
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+
+    if (
+      typeof a[key] === "object" &&
+      a[key] !== null &&
+      typeof b[key] === "object" &&
+      b[key] !== null
+    ) {
+      if (!deepEquals(a[key], b[key])) return false;
+    } else {
+      if (a[key] !== b[key]) return false;
+    }
+  }
+
+  return true;
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3d29aae8..71738f5d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -20,6 +20,14 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@babel/code-frame@^7.0.0":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
+  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
+  dependencies:
+    "@babel/highlight" "^7.24.2"
+    picocolors "^1.0.0"
+
 "@babel/code-frame@^7.22.13":
   version "7.22.13"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz"
@@ -95,6 +103,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
+  integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
+  dependencies:
+    "@babel/types" "^7.24.0"
+
 "@babel/helper-module-imports@^7.22.15":
   version "7.22.15"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz"
@@ -137,6 +152,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz"
   integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
 
+"@babel/helper-string-parser@^7.23.4":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
+  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
+
 "@babel/helper-validator-identifier@^7.22.20":
   version "7.22.20"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz"
@@ -165,6 +185,16 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
+  integrity sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
   version "7.23.0"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz"
@@ -184,6 +214,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.1":
   version "7.23.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz"
@@ -225,6 +262,122 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
+  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
+"@emotion/is-prop-valid@^1.2.1":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
+  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+
+"@emotion/react@^11.11.4":
+  version "11.11.4"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.4.tgz#3a829cac25c1f00e126408fab7f891f00ecc3c1d"
+  integrity sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0"
+  integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==
+  dependencies:
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+
+"@emotion/styled@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
+  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
+
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
@@ -367,6 +520,33 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz"
   integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@headlessui/react@^1.7.17":
   version "1.7.17"
   resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz"
@@ -435,6 +615,90 @@
   resolved "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz"
   integrity sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==
 
+"@mui/base@5.0.0-beta.40":
+  version "5.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
+  integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz#f7c57b261904831877220182303761c012d05046"
+  integrity sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==
+
+"@mui/material@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.14.tgz#a40bd5eccfa9fc925535e1f4d70c6cef77fa3a75"
+  integrity sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.40"
+    "@mui/core-downloads-tracker" "^5.15.14"
+    "@mui/system" "^5.15.14"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.14.tgz#edd9a82948ed01586a01c842eb89f0e3f68970ee"
+  integrity sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.15.14"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.14.tgz#168b154c4327fa4ccc1933a498331d53f61c0de2"
+  integrity sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.14.tgz#8a0c6571077eeb6b5f1ff7aa7ff6a3dc4a14200d"
+  integrity sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.15.14"
+    "@mui/styled-engine" "^5.15.14"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.14":
+  version "7.2.14"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.14.tgz#8a02ac129b70f3d82f2f9b76ded2c8d48e3fc8c9"
+  integrity sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==
+
+"@mui/utils@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.14.tgz#e414d7efd5db00bfdc875273a40c0a89112ade3a"
+  integrity sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@types/prop-types" "^15.7.11"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -456,6 +720,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@tailwindcss/forms@^0.5.6":
   version "0.5.6"
   resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz"
@@ -523,11 +792,21 @@
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.201.tgz"
   integrity sha512-y9euML0cim1JrykNxADLfaG0FgD1g/yTHwUs/Jg9ZIU7WKj2/4IW9Lbb1WZbvck78W/lfGXFfe+u2EGfIJXdLQ==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
 "@types/prop-types@*":
   version "15.7.9"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz"
   integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
 
+"@types/prop-types@^15.7.11":
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+
 "@types/react-dom@^18.2.7":
   version "18.2.14"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz"
@@ -535,6 +814,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.10":
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.2.15":
   version "18.2.35"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.35.tgz"
@@ -749,6 +1035,15 @@ autoprefixer@^10.4.16:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -841,6 +1136,11 @@ clsx@^2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -875,11 +1175,27 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -899,6 +1215,11 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@@ -935,6 +1256,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dompurify@^3.0.6:
   version "3.0.6"
   resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz"
@@ -945,6 +1274,13 @@ electron-to-chromium@^1.4.535:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz"
   integrity sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 esbuild@^0.18.10:
   version "0.18.20"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz"
@@ -1147,6 +1483,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
@@ -1278,6 +1619,13 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
@@ -1309,6 +1657,11 @@ inherits@2:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@@ -1377,6 +1730,11 @@ json-buffer@3.0.1:
   resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
@@ -1584,6 +1942,16 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -1700,7 +2068,7 @@ prettier@^3.2.5:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1736,16 +2104,31 @@ react-dropzone@^14.2.3:
     file-selector "^0.6.0"
     prop-types "^15.8.1"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -1777,7 +2160,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.1.7, resolve@^1.22.2:
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.2:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -1853,6 +2236,11 @@ source-map-js@^1.0.2:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
@@ -1865,6 +2253,11 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz"
@@ -2053,6 +2446,11 @@ yallist@^4.0.0:
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yaml@^2.1.1:
   version "2.3.4"
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz"