;
+ isSelected?: (item) => boolean;
+ parentIsOpen: boolean;
+}> = observer(
+ ({
+ title,
+ flyoutMenuOptions,
+ onClose,
+ handleSelect,
+ isSelected,
+ parentIsOpen,
+ }) => {
+ const { isOpen, onOpen, onClose: onSubMenuClose } = useDisclosure();
+
+ const isMobile = useIsMobile();
+
+ const menuRef = new useRef();
+
+ useOutsideClick({
+ ref: menuRef,
+ enabled: !isMobile,
+ handler: () => {
+ onSubMenuClose();
+ },
+ });
+
+ return (
+
+ );
+ },
+);
+
+export default FlyoutSubMenu;
diff --git a/src/components/chat/ImageWithFallback.tsx b/src/components/chat/ImageWithFallback.tsx
new file mode 100644
index 0000000..c0a9cd8
--- /dev/null
+++ b/src/components/chat/ImageWithFallback.tsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { Image, Box, Spinner, Text, Flex } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+
+const shimmer = keyframes`
+ 0% { background-position: -100% 0; }
+ 100% { background-position: 100% 0; }
+`;
+
+const ImageWithFallback = ({
+ alt,
+ src,
+ fallbackSrc = "/fallback.png",
+ ...props
+}) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [scrollPosition, setScrollPosition] = useState(0);
+ const isSlowLoadingSource = src.includes("text2image.seemueller.io");
+
+ const handleImageLoad = () => setIsLoading(false);
+ const handleImageError = () => {
+ setIsLoading(false);
+ props.onError?.();
+ };
+
+ useEffect(() => {
+ setIsLoading(true);
+ }, [src]);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrolled = window.scrollY;
+ setScrollPosition(scrolled);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ const parallaxOffset = scrollPosition * 0.2;
+
+ return (
+
+ {isLoading && isSlowLoadingSource && (
+
+
+
+ Generating...
+
+
+ )}
+
+
+ );
+};
+
+export default ImageWithFallback;
diff --git a/src/components/chat/IntermediateStepsComponent.tsx b/src/components/chat/IntermediateStepsComponent.tsx
new file mode 100644
index 0000000..1663194
--- /dev/null
+++ b/src/components/chat/IntermediateStepsComponent.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import clientChatStore from "../../stores/ClientChatStore";
+
+export const IntermediateStepsComponent = observer(({ hidden }) => {
+ return (
+
+ {clientChatStore.intermediateSteps.map((step, index) => {
+ switch (step.kind) {
+ case "web-search": {
+ return ;
+ }
+ case "tool-result":
+ return ;
+ default:
+ return ;
+ }
+ })}
+
+ );
+});
+
+const WebSearchResult = () => {
+ return (
+
+ {/*{webResults?.map(r => */}
+ {/* {r.title}*/}
+ {/* {r.url}*/}
+ {/* {r.snippet}*/}
+ {/*)}*/}
+
+ );
+};
+
+export const ToolResult = ({ data }) => {
+ return (
+
+
Tool Result
+
{JSON.stringify(data, null, 2)}
+
+
Generic Step
+
{data.description || "No additional information provided."}
+