Time travel to previous state of a thread

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>
+  );
+}

frontend/src/hooks/useHistories.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { Message } from "../types";
+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: Message[];
+  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 };
+}