-
+ );
+ }
+ if (mode === 'third') {
+ return (
+ {leftColumnContent}
- {rightColumnContent}
+ {firstColumnContent}
+ {secondColumnContent}
+
+
);
}
-
return (
- {firstColumnContent}
+ {secondColumnContent}
- = ({
+ firstItem: topRowContent,
+ secondItem: bottomRowContent
+}) => {
+ return (
+
))}
diff --git a/telemetry/ui/src/components/routes/AppList.tsx b/telemetry/ui/src/components/routes/AppList.tsx
index b801864ca..32e909d3b 100644
--- a/telemetry/ui/src/components/routes/AppList.tsx
+++ b/telemetry/ui/src/components/routes/AppList.tsx
@@ -7,6 +7,7 @@ import { DateTimeDisplay } from '../common/dates';
import { Button } from '../common/button';
import { useState } from 'react';
import { FunnelIcon } from '@heroicons/react/24/outline';
+import { useNavigate } from 'react-router-dom';
const StepCountHeader = (props: {
displayZeroCount: boolean;
@@ -33,6 +34,7 @@ const StepCountHeader = (props: {
export const AppListTable = (props: { apps: ApplicationSummary[]; projectId: string }) => {
const appsCopy = [...props.apps];
const [displayZeroCount, setDisplayZeroCount] = useState(false);
+ const navigate = useNavigate();
const appsToDisplay = appsCopy
.sort((a, b) => {
return new Date(a.last_written) > new Date(b.last_written) ? -1 : 1;
@@ -62,7 +64,9 @@ export const AppListTable = (props: { apps: ApplicationSummary[]; projectId: str
{leftColumnContent}
- {rightColumnContent}
+
+
+ );
+};
+export const TwoRowLayout: React.FC{firstColumnContent}
+ {secondColumnContent}
+
+
);
};
-
-export default TwoColumnLayout;
diff --git a/telemetry/ui/src/components/nav/appcontainer.tsx b/telemetry/ui/src/components/nav/appcontainer.tsx
index 8fd7faa5c..7f9de1b2e 100644
--- a/telemetry/ui/src/components/nav/appcontainer.tsx
+++ b/telemetry/ui/src/components/nav/appcontainer.tsx
@@ -11,59 +11,9 @@ import {
} from '@heroicons/react/24/outline';
import { ListBulletIcon } from '@heroicons/react/20/solid';
import { BreadCrumb } from './breadcrumb';
+import { Link } from 'react-router-dom';
+import { classNames } from '../../utils/tailwind';
-// TODO -- enable this when we have examples
-const DISPLAY_CHILDREN = false;
-/**
- * Hardcoded sidebars, most of these are just external links.
- * It looks nice though.
- */
-const navigation = [
- {
- name: 'Projects',
- href: '/projects',
- icon: Square2StackIcon,
- current: true,
- linkType: 'internal'
- },
- {
- name: 'Examples',
- href: 'https://github.com/DAGWorks-Inc/burr/tree/main/examples',
- icon: ListBulletIcon,
- current: false,
- linkType: 'external',
- children: [
- { name: 'counter', href: '#', current: false },
- { name: 'chatbot', href: '#', current: false },
- { name: 'cowsay', href: '#', current: false }
- ]
- },
- {
- name: 'Develop',
- href: 'https://github.com/dagworks-inc/burr',
- icon: ComputerDesktopIcon,
- current: false,
- linkType: 'external'
- },
- {
- name: 'Documentation',
- href: 'https://burr.dagworks.io',
- icon: QuestionMarkCircleIcon,
- current: false,
- linkType: 'external'
- },
- {
- name: 'Get Help',
- href: 'https://join.slack.com/t/hamilton-opensource/shared_invite/zt-1bjs72asx-wcUTgH7q7QX1igiQ5bbdcg',
- icon: ChatBubbleLeftEllipsisIcon,
- current: false,
- linkType: 'external'
- }
-];
-
-function classNames(...classes: string[]) {
- return classes.filter(Boolean).join(' ');
-}
/**
* Toggles the sidebar open and closed.
*/
@@ -95,6 +45,56 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
const toggleSidebar = () => {
setSidebarOpen(!sidebarOpen);
};
+ const navigation = [
+ {
+ name: 'Projects',
+ href: '/projects',
+ icon: Square2StackIcon,
+ linkType: 'internal'
+ },
+ process.env.REACT_APP_EXAMPLE_DISPLAY === 'run'
+ ? {
+ name: 'Demos',
+ href: '/demos',
+ icon: ListBulletIcon,
+ linkType: 'internal',
+ children: [
+ { name: 'counter', href: '/demos/counter', current: false, linkType: 'internal' },
+ { name: 'chatbot', href: '/demos/chatbot', current: false, linkType: 'internal' }
+ ]
+ }
+ : {
+ name: 'Examples',
+ href: 'https://github.com/DAGWorks-Inc/burr/tree/main/examples',
+ icon: ListBulletIcon,
+ linkType: 'external'
+ },
+ {
+ name: 'Develop',
+ href: 'https://github.com/dagworks-inc/burr',
+ icon: ComputerDesktopIcon,
+ linkType: 'external'
+ },
+ {
+ name: 'Documentation',
+ href: 'https://burr.dagworks.io',
+ icon: QuestionMarkCircleIcon,
+ linkType: 'external'
+ },
+ {
+ name: 'Get Help',
+ href: 'https://join.slack.com/t/hamilton-opensource/shared_invite/zt-1bjs72asx-wcUTgH7q7QX1igiQ5bbdcg',
+ icon: ChatBubbleLeftEllipsisIcon,
+ linkType: 'external'
+ }
+ ];
+
+ const isCurrent = (href: string, linkType: string) => {
+ if (linkType === 'external') {
+ return false;
+ }
+ return window.location.pathname.startsWith(href);
+ };
return (
<>
@@ -155,12 +155,14 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
{topRowContent}
+ {bottomRowContent}
-
{navigation.map((item) => (
-
- {
>
{ aria-hidden="true" /> {item.name} - +
))}
-
{navigation.map((item) => (
-
- {!item.children || !DISPLAY_CHILDREN ? (
-
@@ -222,14 +226,16 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
aria-hidden="true"
/>
{item.name}
-
+
) : (
{({ open }) => ( <> @@ -249,17 +255,17 @@ export const AppContainer = (props: { children: React.ReactNode }) => { {item.children.map((subItem) => ( diff --git a/telemetry/ui/src/components/nav/breadcrumb.tsx b/telemetry/ui/src/components/nav/breadcrumb.tsx index 7992be3a8..7487f212c 100644 --- a/telemetry/ui/src/components/nav/breadcrumb.tsx +++ b/telemetry/ui/src/components/nav/breadcrumb.tsx @@ -1,5 +1,5 @@ import { HomeIcon } from '@heroicons/react/20/solid'; -import { useLocation } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; /** * Breadcrumb component @@ -27,10 +27,10 @@ export const BreadCrumb = () => {- - {/* 44px */} -
))}{subItem.name} - +-
- + Home - +
{pages.map((page) => (
@@ -40,15 +40,17 @@ export const BreadCrumb = () => {
className="h-5 w-5 flex-shrink-0 text-gray-300"
fill="currentColor"
viewBox="0 0 20 20"
- aria-hidden="true">
+ aria-hidden="true"
+ >
- + aria-current={page.current ? 'page' : undefined} + > {page.name} - + - - {/* 44px */} -
Invalid URL
;
+ }
+ return
+
+ );
+};
+export const AppSelector = (props: {
+ projectId: string;
+ setApp: (app: ApplicationSummary) => void;
+ currentApp: ApplicationSummary | undefined;
+}) => {
+ const { projectId, setApp } = props;
+ const { data, refetch } = useQuery(
+ ['apps', projectId],
+ () => DefaultService.getAppsApiV0ProjectIdAppsGet(projectId as string),
+ { enabled: projectId !== undefined }
+ );
+ const createAndUpdateMutation = useMutation(
+ (app_id: string) =>
+ DefaultService.createNewApplicationApiV0ChatbotProjectIdAppIdCreatePost(projectId, app_id),
+ {
+ onSuccess: (appID) => {
+ refetch().then((data) => {
+ const appSummaries = data.data || [];
+ const app = appSummaries.find((app) => app.app_id === appID);
+ if (app) {
+ setApp(app);
+ }
+ });
+ }
+ }
+ );
+ const dataOrEmpty = Array.from(data || []);
+ const options = dataOrEmpty
+ .sort((a, b) => {
+ return new Date(a.last_written) > new Date(b.last_written) ? -1 : 1;
+ })
+ .map((app) => {
+ return {
+ value: app.app_id,
+ label:
+ };
+ });
+ return (
+
+ {props.application.num_steps}
+ {props.application.app_id}
+
+
+ 
{
+ const img = e.target as HTMLImageElement;
+ img.src = 'https://via.placeholder.com/500x500?text=Image+Unavailable';
+ img.alt =
+ 'Image unavailable as OpenAI does not persist images -- generate a new one, or modify the code to save it for you.';
+ setCaption(img.alt);
+ }}
+ />
+ {caption && {caption}}
+
+ );
+};
+const ChatMessage = (props: { message: ChatItem; id?: string }) => {
+ return (
+
+
+
+ );
+};
+
+const scrollToLatest = () => {
+ const lastMessage = document.getElementById(LAST_MESSAGE_ID);
+ if (lastMessage) {
+ const scroll = () => {
+ lastMessage.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+ };
+ scroll();
+ const observer = new ResizeObserver(() => {
+ scroll();
+ });
+ observer.observe(lastMessage);
+ setTimeout(() => observer.disconnect(), 1000); // Adjust timeout as needed
+ }
+};
+
+export const Chatbot = (props: { projectId: string; appId: string | undefined }) => {
+ const [currentPrompt, setCurrentPrompt] = useState
+ {getCharacter(props.message.role)}
+ {props.message.type === ChatItem.type.TEXT ||
+ props.message.type === ChatItem.type.CODE ||
+ props.message.type === ChatItem.type.ERROR ? (
+
+
+ );
+};
+
+export const TelemetryWithSelector = (props: {
+ projectId: string;
+ currentApp: ApplicationSummary | undefined;
+ setCurrentApp: (app: ApplicationSummary) => void;
+}) => {
+ return (
+ {'Learn Burr '}
++ The chatbot below is implemented using Burr. Watch the Burr UI (on the right) change as you + chat... +
+
+ {displayedChatHistory.map((message, i) => (
+
+
+ setCurrentPrompt(e.target.value)}
+ onKeyDown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ sendPrompt();
+ }
+ }}
+ disabled={isChatWaiting}
+ />
+
+
+
+
+ );
+};
+
+export const ChatbotWithTelemetry = () => {
+ const currentProject = 'demo:chatbot';
+ const [currentApp, setCurrentApp] = useState
+
+
+
+ );
+};
diff --git a/telemetry/ui/src/examples/MiniTelemetry.tsx b/telemetry/ui/src/examples/MiniTelemetry.tsx
new file mode 100644
index 000000000..646bbccce
--- /dev/null
+++ b/telemetry/ui/src/examples/MiniTelemetry.tsx
@@ -0,0 +1,17 @@
+import { AppView } from '../components/routes/app/AppView';
+
+export const MiniTelemetry = (props: { projectId: string; appId: string | undefined }) => {
+ //TODO -- put this upstream
+ const { projectId, appId } = props;
+ if (appId === undefined) {
+ return ;
+ }
+ return (
+ + {' '} + This is a WIP! Please check back soon or comment/vote/contribute at the{' '} + + github issue + + . +
+