mirror of
https://github.com/sourcebot-dev/sourcebot.git
synced 2025-12-12 04:15:30 +00:00
chore(demo): add posthog events and link to docs
This commit is contained in:
msukkari
parent
2ab0b988e4
commit
be9979f18a
2 changed files with 139 additions and 97 deletions
|
|
@ -9,6 +9,7 @@ import { ContextItem, RepoContextItem, SearchContextItem } from "@/features/chat
|
|||
import { DemoExamples, DemoSearchExample, DemoSearchContextExample, DemoSearchContext } from "@/types";
|
||||
import { cn, getCodeHostIcon } from "@/lib/utils";
|
||||
import { RepositoryQuery, SearchContextQuery } from "@/lib/types";
|
||||
import useCaptureEvent from "@/hooks/useCaptureEvent";
|
||||
|
||||
interface AskSourcebotDemoCardsProps {
|
||||
demoExamples: DemoExamples;
|
||||
|
|
@ -25,7 +26,14 @@ export const AskSourcebotDemoCards = ({
|
|||
searchContexts,
|
||||
repos,
|
||||
}: AskSourcebotDemoCardsProps) => {
|
||||
const captureEvent = useCaptureEvent();
|
||||
|
||||
const handleExampleClick = (example: DemoSearchExample) => {
|
||||
captureEvent('wa_demo_search_example_card_pressed', {
|
||||
exampleTitle: example.title,
|
||||
exampleUrl: example.url || '',
|
||||
});
|
||||
|
||||
if (example.url) {
|
||||
window.open(example.url, '_blank');
|
||||
}
|
||||
|
|
@ -63,6 +71,12 @@ export const AskSourcebotDemoCards = ({
|
|||
return;
|
||||
}
|
||||
|
||||
captureEvent('wa_demo_search_context_card_pressed', {
|
||||
contextType: context.type,
|
||||
contextName: context.value,
|
||||
contextDisplayName: context.displayName,
|
||||
});
|
||||
|
||||
const isDemoMode = process.env.NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT === "demo";
|
||||
const isSelected = selectedItems.some((item) => item.value === context.value);
|
||||
if (isSelected) {
|
||||
|
|
@ -109,112 +123,129 @@ export const AskSourcebotDemoCards = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="w-full mt-8 space-y-12 px-4 max-w-[1000px]">
|
||||
{/* Search Context Row */}
|
||||
<div className="space-y-4">
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<Layers className="h-5 w-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold">Search Contexts</h3>
|
||||
<>
|
||||
{process.env.NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT === "demo" && (
|
||||
<p className="text-sm text-muted-foreground text-center mt-6">
|
||||
Interested in using Sourcebot on your code? Check out our{' '}
|
||||
<a
|
||||
href="https://docs.sourcebot.dev/docs/overview"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
onClick={() => captureEvent('wa_demo_docs_link_pressed', {})}
|
||||
>
|
||||
docs
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="w-full mt-8 space-y-12 px-4 max-w-[1000px]">
|
||||
{/* Search Context Row */}
|
||||
<div className="space-y-4">
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<Layers className="h-5 w-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold">Search Contexts</h3>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Select the context you want to ask questions about</p>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Select the context you want to ask questions about</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{demoExamples.searchContextExamples.map((contextExample) => {
|
||||
const context = demoExamples.searchContexts.find((context) => context.id === contextExample.searchContext)
|
||||
if (!context) {
|
||||
console.error(`Search context ${contextExample.searchContext} not found on handleContextClick`);
|
||||
return null;
|
||||
}
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{demoExamples.searchContextExamples.map((contextExample) => {
|
||||
const context = demoExamples.searchContexts.find((context) => context.id === contextExample.searchContext)
|
||||
if (!context) {
|
||||
console.error(`Search context ${contextExample.searchContext} not found on handleContextClick`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const isSelected = selectedItems.some(
|
||||
(selected) => (selected.type === 'context' && selected.value === context.value) ||
|
||||
(selected.type === 'repo' && selected.value === context.value)
|
||||
);
|
||||
const isSelected = selectedItems.some(
|
||||
(selected) => (selected.type === 'context' && selected.value === context.value) ||
|
||||
(selected.type === 'repo' && selected.value === context.value)
|
||||
);
|
||||
|
||||
const searchContext = searchContexts.find((item) => item.name === context.value);
|
||||
const numRepos = searchContext ? searchContext.repoNames.length : undefined;
|
||||
return (
|
||||
<Card
|
||||
key={context.value}
|
||||
className={`cursor-pointer transition-all duration-200 hover:shadow-md hover:scale-105 group w-full max-w-[280px] ${isSelected ? "border-primary bg-primary/5 shadow-sm" : "hover:border-primary/50"
|
||||
}`}
|
||||
onClick={() => handleContextClick(demoExamples.searchContexts, contextExample)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`flex-shrink-0 p-2 rounded-lg transition-transform group-hover:scale-105`}
|
||||
>
|
||||
{getContextIcon(context)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4
|
||||
className={`font-medium text-sm transition-colors ${isSelected ? "text-primary" : "group-hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
{context.displayName}
|
||||
</h4>
|
||||
{numRepos && (
|
||||
<Badge className="text-[10px] px-1.5 py-0.5 h-4">
|
||||
{numRepos} repos
|
||||
</Badge>
|
||||
)}
|
||||
const searchContext = searchContexts.find((item) => item.name === context.value);
|
||||
const numRepos = searchContext ? searchContext.repoNames.length : undefined;
|
||||
return (
|
||||
<Card
|
||||
key={context.value}
|
||||
className={`cursor-pointer transition-all duration-200 hover:shadow-md hover:scale-105 group w-full max-w-[280px] ${isSelected ? "border-primary bg-primary/5 shadow-sm" : "hover:border-primary/50"
|
||||
}`}
|
||||
onClick={() => handleContextClick(demoExamples.searchContexts, contextExample)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`flex-shrink-0 p-2 rounded-lg transition-transform group-hover:scale-105`}
|
||||
>
|
||||
{getContextIcon(context)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4
|
||||
className={`font-medium text-sm transition-colors ${isSelected ? "text-primary" : "group-hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
{context.displayName}
|
||||
</h4>
|
||||
{numRepos && (
|
||||
<Badge className="text-[10px] px-1.5 py-0.5 h-4">
|
||||
{numRepos} repos
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{contextExample.description}</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{contextExample.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Example Searches Row */}
|
||||
<div className="space-y-4">
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<Search className="h-5 w-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold">Community Ask Results</h3>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Check out these featured ask results from the community</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{demoExamples.searchExamples.map((example) => {
|
||||
const searchContexts = demoExamples.searchContexts.filter((context) => example.searchContext.includes(context.id))
|
||||
return (
|
||||
<Card
|
||||
key={example.url}
|
||||
className="cursor-pointer transition-all duration-200 hover:shadow-md hover:scale-105 hover:border-primary/50 group w-full max-w-[350px]"
|
||||
onClick={() => handleExampleClick(example)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
{searchContexts.map((context) => (
|
||||
<Badge key={context.value} variant="secondary" className="text-[10px] px-1.5 py-0.5 h-4 flex items-center gap-1">
|
||||
{getContextIcon(context, 12)}
|
||||
{context.displayName}
|
||||
</Badge>
|
||||
))}
|
||||
|
||||
{/* Example Searches Row */}
|
||||
<div className="space-y-4">
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<Search className="h-5 w-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold">Community Ask Results</h3>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Check out these featured ask results from the community</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{demoExamples.searchExamples.map((example) => {
|
||||
const searchContexts = demoExamples.searchContexts.filter((context) => example.searchContext.includes(context.id))
|
||||
return (
|
||||
<Card
|
||||
key={example.url}
|
||||
className="cursor-pointer transition-all duration-200 hover:shadow-md hover:scale-105 hover:border-primary/50 group w-full max-w-[350px]"
|
||||
onClick={() => handleExampleClick(example)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
{searchContexts.map((context) => (
|
||||
<Badge key={context.value} variant="secondary" className="text-[10px] px-1.5 py-0.5 h-4 flex items-center gap-1">
|
||||
{getContextIcon(context, 12)}
|
||||
{context.displayName}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="font-semibold text-sm group-hover:text-primary transition-colors line-clamp-2">
|
||||
{example.title}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">
|
||||
{example.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="font-semibold text-sm group-hover:text-primary transition-colors line-clamp-2">
|
||||
{example.title}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">
|
||||
{example.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -282,5 +282,16 @@ export type PosthogEventMap = {
|
|||
chatId: string,
|
||||
messageId: string,
|
||||
},
|
||||
//////////////////////////////////////////////////////////////////
|
||||
wa_demo_docs_link_pressed: {},
|
||||
wa_demo_search_context_card_pressed: {
|
||||
contextType: string,
|
||||
contextName: string,
|
||||
contextDisplayName: string,
|
||||
},
|
||||
wa_demo_search_example_card_pressed: {
|
||||
exampleTitle: string,
|
||||
exampleUrl: string,
|
||||
},
|
||||
}
|
||||
export type PosthogEvent = keyof PosthogEventMap;
|
||||
Loading…
Reference in a new issue