Function TranscriptPage

pages/analytics.tsx:46–279

(props: TranscriptPageProps)

};

export default function TranscriptPage(props: TranscriptPageProps) {
  const router = useRouter();
  const supabase = useSupabaseClient<Database>();
  const { profile } = useProfile();
  const [selectedTranscriptId, setSelectedTranscriptId] = useState<
    number | null
  >(props.conversationId ?? null);
  const [conversation, setConversation] = useState<FullConversationItem | null>(
    null,
  );
  const [devMode, setDevMode] = useState<boolean>(false);
  const [shareClicked, setShareClicked] = useState<boolean>(false);
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (selectedTranscriptId) {
      if (Object.keys(router.query).length)
        router.replace("/analytics", undefined, {
          shallow: true,
        });
      (async () => {
        const { data, error } = await supabase
          .from("conversations")
          .select(
            "created_at,is_playground,chat_messages(id,role,content,name,conversation_index,created_at),feedback(id,feedback_positive,conversation_length_at_feedback,negative_feedback_text)",
          )
          .eq("id", selectedTranscriptId)
          .order("conversation_index", {
            ascending: true,
            foreignTable: "chat_messages",
          })
          .single();
        if (error) throw new Error(error.message);
        setConversation(data);
      })();
    }
  }, [selectedTranscriptId]);

  return (
    <div className="min-h-screen bg-gray-800">
      <Headers />
      <Navbar current={"Transcripts"} />
      <div className={"flex flex-row w-screen overflow-x-hidden"}>
        <TranscriptSearchSidebar
          {...props}
          selectedTranscriptId={selectedTranscriptId}
          setSelectedTranscriptId={setSelectedTranscriptId}
        />
        <div
          ref={ref}
          className={classNames(
            "relative max-h-[calc(100vh-4rem)] flex flex-grow",
            selectedTranscriptId ? "bg-white" : "bg-gray-800",
          )}
        >
          {selectedTranscriptId && (
            <>
              <div className="absolute top-0.5 left-1.5 flex flex-col tracking-tight leading-3 place-items-center text-center gap-y-1 text-xs text-gray-600 bg-white rounded px-1 py-1.5 z-20">