added compact max mode. added to docs index.

PostHog · Jan 9, 2025 · 56eb195 · 56eb195
1 parent 3e14bd2
commit 56eb195
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/AskMax/index.tsx b/src/components/AskMax/index.tsx
@@ -11,9 +11,11 @@ interface AskMaxProps {
     border?: boolean
     className?: string
     quickQuestions?: string[]
+    linkOnly?: boolean
+    children?: React.ReactNode
 }
 
-export default function AskMax({ border = false, className = '', quickQuestions }: AskMaxProps) {
+export default function AskMax({ border = false, className = '', quickQuestions, linkOnly = false, children }: AskMaxProps) {
     const posthog = usePostHog()
     const { compact } = useLayoutData()
     const { openChat, setQuickQuestions } = useChat()
@@ -37,6 +39,14 @@ export default function AskMax({ border = false, className = '', quickQuestions
         openChat()
     }
 
+    if (linkOnly) {
+        return (
+            <button onClick={handleChatOpen} className={className}>
+                {children}
+            </button>
+        )
+    }
+
     return compact ? null : (
         <div className="@container">
             <div

diff --git a/src/pages/docs/index.tsx b/src/pages/docs/index.tsx
@@ -11,6 +11,8 @@ import KeyboardShortcut from 'components/KeyboardShortcut'
 import { docsMenu } from '../../navs'
 import * as Icons from '@posthog/icons'
 import SidebarSearchBox from 'components/Search/SidebarSearchBox'
+import AskMax from 'components/AskMax'
+import { defaultQuickQuestions } from 'hooks/useInkeepSettings'
 
 const ProductLink = ({ icon, name, url, color }) => {
     const Icon = Icons[icon]
@@ -71,10 +73,10 @@ export const DocsIndex = () => {
             <SEO title="Documentation - PostHog" />
 
             <PostLayout article={false} title={'Docs'} hideSidebar hideSurvey>
-                <section className="mb-8 flex flex-col-reverse lg:flex-row gap-4 bg-white dark:bg-accent-dark border border-light dark:border-dark rounded-md p-4 md:p-8 lg:pr-0 shadow-xl">
+                <section className="mb-8 flex flex-col-reverse lg:flex-row bg-white dark:bg-accent-dark border border-light dark:border-dark rounded-md p-4 md:p-8 lg:pr-0 shadow-xl">
                     <div className="@container flex-1 text-center sm:text-left">
                         <h2>New to PostHog?</h2>
-                        <p className="text-[15px]">
+                        <p className="text-[15px] md:pr-4">
                             The getting started guide covers adding PostHog to your app or site, sending events,
                             identifying users, creating actions and insights, and assigning properties to users and
                             users to groups.
@@ -88,11 +90,10 @@ export const DocsIndex = () => {
                             Get started
                         </CallToAction>
 
-                        <div className="flex gap-1 justify-center @md:justify-start lg:justify-start @sm:items-center mt-6">
-                            <IconLightBulb className="w-6 h-6 text-primary dark:text-primary-dark opacity-50" />
-                            <p className="text-sm m-0 text-left @sm:text-center">
-                                <strong>Tip:</strong> Open search with <KeyboardShortcut text="/" /> , then{' '}
-                                <KeyboardShortcut text="Tab" size="sm" /> to search docs
+                        <div className="flex gap-2 justify-center @md:justify-start lg:justify-start @sm:items-center mt-6">
+                            <IconLightBulb className="size-8 flex-[0_0_2rem] @md:flex-[0_0_auto] @md:size-10 text-primary dark:text-primary-dark opacity-50 bg-accent dark:bg-accent-dark rounded-sm p-2" />
+                            <p className="text-sm m-0 text-left leading-relaxed">
+                                <strong>Tip:</strong> <AskMax linkOnly className="text-red dark:text-yellow font-semibold">Chat with Max AI</AskMax> for quick answers to questions. <span className="@md:inline-block">Open by typing <KeyboardShortcut text="?" /> or search with <KeyboardShortcut text="/" />.</span>
                             </p>
                         </div>
                     </div>
@@ -113,7 +114,6 @@ export const DocsIndex = () => {
                 <section className="@container">
 
                     <h4 className="mb-2">Product documentation</h4>
-
                     <div className="max-w-4xl">
                         <SidebarSearchBox filter="docs" />
                     </div>