diff --git a/app/src/Routes.tsx b/app/src/Routes.tsx index 5762531f13..6e97080b73 100644 --- a/app/src/Routes.tsx +++ b/app/src/Routes.tsx @@ -46,6 +46,7 @@ import { SettingsPage, SpanPlaygroundPage, spanPlaygroundPageLoader, + SupportPage, TracePage, TracingRoot, } from "./pages"; @@ -200,6 +201,13 @@ const router = createBrowserRouter( crumb: () => "APIs", }} /> + } + handle={{ + crumb: () => "Support", + }} + /> } diff --git a/app/src/components/icon/Icons.tsx b/app/src/components/icon/Icons.tsx index 1b99bc8da0..c1dde5d0a7 100644 --- a/app/src/components/icon/Icons.tsx +++ b/app/src/components/icon/Icons.tsx @@ -7,11 +7,6 @@ const loadingCircleKeyframes = keyframes` } `; -/** - * Raw svg icons from eva. - * @src https://akveo.github.io/eva-icons/#/ - */ - //A export const ActivityOutline = () => ( @@ -1216,6 +1211,20 @@ export const FunnelOutline = () => ( ); //G +export const GitHub = () => ( + + + + + + +); + export const Grid = () => ( @@ -1420,6 +1429,27 @@ export const LassoOutline = () => ( ); +export const LifeBuoy = () => ( + + + + + + + + + +); + export const ListOutline = () => ( @@ -1891,6 +1921,30 @@ export const SettingsOutline = () => ( ); +export const Slack = () => ( + + + + + + + + + + +); + export const SlideOut = () => ( css` margin: 0 0 var(--ac-global-dimension-static-size-200) 0; `; -const GitHubSVG = () => ( - - - - - - -); - function ExternalLink(props: { href: string; icon: ReactNode; text: string }) { return ( @@ -107,16 +90,6 @@ function ExternalLink(props: { href: string; icon: ReactNode; text: string }) { ); } -export function GitHubLink() { - return ( - } />} - text="Repository" - /> - ); -} - export function DocsLink() { return (
  • - + } />} + />
  • diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx index be1d461f97..c47a5fc38d 100644 --- a/app/src/pages/index.tsx +++ b/app/src/pages/index.tsx @@ -22,3 +22,4 @@ export * from "./profile"; export * from "./playground"; export * from "./AuthenticatedRoot"; export * from "./authenticatedRootLoader"; +export * from "./support"; diff --git a/app/src/pages/support/SupportPage.tsx b/app/src/pages/support/SupportPage.tsx new file mode 100644 index 0000000000..8f49906a56 --- /dev/null +++ b/app/src/pages/support/SupportPage.tsx @@ -0,0 +1,109 @@ +import React, { ReactNode } from "react"; +import { css } from "@emotion/react"; + +import { Flex, Heading, Text, View } from "@arizeai/components"; + +import { Icon, Icons } from "@phoenix/components"; + +const supportItemsCSS = css` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + gap: var(--ac-global-dimension-size-200); + padding: var(--ac-global-dimension-size-200); +`; + +export function SupportPage() { + return ( +
    + + + + Support + + We are here to help. Pick a channel below to get in touch with us. + + + +
    + } />} + href="https://docs.arize.com/phoenix" + title="Documentation" + description="Visit our documentation for tutorials and AI support." + /> + } />} + href="https://github.com/Arize-ai/phoenix/issues" + title="GitHub Issues" + description="Create an issue on Github to report bugs or request new features." + /> + } />} + href="https://github.com/Arize-ai/phoenix/discussions" + title="GitHub Discussions" + description="Create a discussion on Github to ask questions or share feedback." + /> + } />} + href="https://arize-ai.slack.com/join/shared_invite/zt-11t1vbu4x-xkBIHmOREQnYnYDH1GDfCg?__hstc=259489365.a667dfafcfa0169c8aee4178d115dc81.1733501603539.1733501603539.1733501603539.1&__hssc=259489365.1.1733501603539&__hsfp=3822854628&submissionGuid=381a0676-8f38-437b-96f2-fc10875658df#/shared-invite/email" + title="Slack" + description="Join our Slack community to chat with other users and the team." + /> + } />} + href="mailto:phoenix-support@arize.com?subject=Slack%20Connect%20Request" + title="Slack Connect" + description="Get a dedicated support channel for you and your team." + /> +
    +     +
    + ); +} + +const supportItemCSS = css` + padding: var(--ac-global-dimension-size-200) + var(--ac-global-dimension-size-200) var(--ac-global-dimension-size-200); + border: var(--ac-global-border-size-thin) solid + var(--ac-global-border-color-dark); + border-radius: var(--ac-global-dimension-size-100); + cursor: pointer; + background-color: var(--ac-global-background-color-dark); + display: flex; + flex-direction: column; + gap: var(--ac-global-dimension-size-50); + color: var(--ac-global-color-text-700); + transition: border-color 0.2s ease-in-out; + text-decoration: none; + &:hover { + border-color: var(--ac-global-color-primary); + } +`; + +const SupportItem = ({ + icon, + href, + title, + description, +}: { + icon: ReactNode; + href: string; + title: string; + description: string; +}) => { + return ( + + + {icon} + {title} + + + {description} + + + ); +}; diff --git a/app/src/pages/support/index.tsx b/app/src/pages/support/index.tsx new file mode 100644 index 0000000000..7995ab70fe --- /dev/null +++ b/app/src/pages/support/index.tsx @@ -0,0 +1 @@ +export * from "./SupportPage";