Skip to content

Commit a009461

Browse files
msukkarimsukkari
authored
feat(web): clean up Ask chat box toolbar (#1263)
1 parent 4e8d389 commit a009461

8 files changed

Lines changed: 104 additions & 181 deletions

File tree

‎packages/web/src/app/(app)/askgh/[owner]/[repo]/components/landingPage.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import { ChatBoxToolbar } from "@/features/chat/components/chatBox/chatBoxToolba
88
import { NotConfiguredErrorBanner } from "@/features/chat/components/notConfiguredErrorBanner";
99
import { LanguageModelInfo, RepoSearchScope } from "@/features/chat/types";
1010
import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
11+
import { DISABLED_MCP_SERVER_IDS_LOCAL_STORAGE_KEY } from "@/features/chat/constants";
1112
import { getRepoImageSrc } from '@/lib/utils';
1213
import { useMemo, useState } from "react";
14+
import { useLocalStorage } from "usehooks-ts";
1315

1416
interface LandingPageProps {
1517
languageModels: LanguageModelInfo[];
@@ -30,6 +32,7 @@ export const LandingPage = ({
3032
}: LandingPageProps) => {
3133
const { createNewChatThread, isLoading } = useCreateNewChatThread();
3234
const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
35+
const [disabledMcpServerIds, setDisabledMcpServerIds] = useLocalStorage<string[]>(DISABLED_MCP_SERVER_IDS_LOCAL_STORAGE_KEY, [], { initializeWithValue: false });
3336
const isChatBoxDisabled = languageModels.length === 0;
3437

3538
const selectedSearchScopes = useMemo(() => [
@@ -68,7 +71,7 @@ export const LandingPage = ({
6871
<div className="border rounded-md w-full shadow-sm">
6972
<ChatBox
7073
onSubmit={(children) => {
71-
createNewChatThread(children, selectedSearchScopes, []);
74+
createNewChatThread(children, selectedSearchScopes, disabledMcpServerIds);
7275
}}
7376
className="min-h-[50px]"
7477
isRedirecting={isLoading}
@@ -90,6 +93,8 @@ export const LandingPage = ({
9093
onSelectedSearchScopesChange={() => { }}
9194
isContextSelectorOpen={isContextSelectorOpen}
9295
onContextSelectorOpenChanged={setIsContextSelectorOpen}
96+
disabledMcpServerIds={disabledMcpServerIds}
97+
onDisabledMcpServerIdsChange={setDisabledMcpServerIds}
9398
/>
9499
<SearchModeSelector
95100
searchMode="agentic"

‎packages/web/src/ee/features/chat/mcp/components/connectorsMenu.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ import { McpFavicon } from "@/ee/features/chat/mcp/components/mcpFavicon";
1818
import { mcpQueryKeys } from "@/ee/features/chat/mcp/queryKeys";
1919
import { isServiceError } from "@/lib/utils";
2020
import { useQuery, useQueryClient } from "@tanstack/react-query";
21-
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
2221
import { AlertTriangleIcon, CableIcon, Loader2Icon, PlusCircleIcon, PlusIcon, RefreshCwIcon, SettingsIcon } from "lucide-react";
23-
import { PlusButtonInfoCard } from "@/features/chat/components/chatBox/plusButtonInfoCard";
2422
import { useRouter } from "next/navigation";
2523
import { useEffect, useRef, useState } from "react";
2624
import { useSlate } from "slate-react";
@@ -198,22 +196,15 @@ export const ConnectorsMenu = ({
198196

199197
return (
200198
<DropdownMenu>
201-
<Tooltip>
202-
<TooltipTrigger asChild>
203-
<DropdownMenuTrigger asChild>
204-
<Button
205-
variant="ghost"
206-
size="icon"
207-
className="w-6 h-6 text-muted-foreground hover:text-primary"
208-
>
209-
<PlusIcon className="w-4 h-4" />
210-
</Button>
211-
</DropdownMenuTrigger>
212-
</TooltipTrigger>
213-
<TooltipContent side="bottom" className="p-0 border-0 bg-transparent shadow-none">
214-
<PlusButtonInfoCard />
215-
</TooltipContent>
216-
</Tooltip>
199+
<DropdownMenuTrigger asChild>
200+
<Button
201+
variant="ghost"
202+
size="icon"
203+
className="w-6 h-6 text-muted-foreground hover:text-primary"
204+
>
205+
<PlusIcon className="w-4 h-4" />
206+
</Button>
207+
</DropdownMenuTrigger>
217208
<DropdownMenuContent side="bottom" align="start" className="w-52" onCloseAutoFocus={(e) => e.preventDefault()}>
218209
<DropdownMenuSub>
219210
<DropdownMenuSubTrigger className="gap-2">

‎packages/web/src/features/chat/components/chatBox/atMentionButton.tsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
'use client';
22

33
import { Button } from "@/components/ui/button";
4-
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
54
import { AtSignIcon } from "lucide-react";
65
import { useCallback } from "react";
76
import { ReactEditor, useSlate } from "slate-react";
8-
import { AtMentionInfoCard } from "./atMentionInfoCard";
97

108
// @note: we have this as a seperate component to avoid having to re-render the
119
// entire toolbar whenever the user types (since we are using the useSlate hook
@@ -19,20 +17,13 @@ export const AtMentionButton = () => {
1917
}, [editor]);
2018

2119
return (
22-
<Tooltip>
23-
<TooltipTrigger asChild>
24-
<Button
25-
variant="ghost"
26-
size="icon"
27-
className="w-6 h-6 text-muted-foreground hover:text-primary"
28-
onClick={onAddContext}
29-
>
30-
<AtSignIcon className="w-4 h-4" />
31-
</Button>
32-
</TooltipTrigger>
33-
<TooltipContent side="bottom" className="p-0 border-0 bg-transparent shadow-none">
34-
<AtMentionInfoCard />
35-
</TooltipContent>
36-
</Tooltip>
20+
<Button
21+
variant="ghost"
22+
size="icon"
23+
className="w-6 h-6 text-muted-foreground hover:text-primary"
24+
onClick={onAddContext}
25+
>
26+
<AtSignIcon className="w-4 h-4" />
27+
</Button>
3728
);
3829
}

‎packages/web/src/features/chat/components/chatBox/atMentionInfoCard.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎packages/web/src/features/chat/components/chatBox/connectorsExplainerMenu.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import {
88
DropdownMenuLabel,
99
DropdownMenuTrigger,
1010
} from "@/components/ui/dropdown-menu";
11-
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
1211
import { CableIcon, PlusIcon } from "lucide-react";
13-
import { PlusButtonInfoCard } from "./plusButtonInfoCard";
1412
import { UpsellDialog } from "@/features/billing/upsellDialog";
1513

1614
// TODO(ask): finalize the connectors docs URL once the page exists.
@@ -38,22 +36,15 @@ export const ConnectorsExplainerMenu = () => {
3836
return (
3937
<>
4038
<DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
41-
<Tooltip>
42-
<TooltipTrigger asChild>
43-
<DropdownMenuTrigger asChild>
44-
<Button
45-
variant="ghost"
46-
size="icon"
47-
className="w-6 h-6 text-muted-foreground hover:text-primary"
48-
>
49-
<PlusIcon className="w-4 h-4" />
50-
</Button>
51-
</DropdownMenuTrigger>
52-
</TooltipTrigger>
53-
<TooltipContent side="bottom" className="p-0 border-0 bg-transparent shadow-none">
54-
<PlusButtonInfoCard />
55-
</TooltipContent>
56-
</Tooltip>
39+
<DropdownMenuTrigger asChild>
40+
<Button
41+
variant="ghost"
42+
size="icon"
43+
className="w-6 h-6 text-muted-foreground hover:text-primary"
44+
>
45+
<PlusIcon className="w-4 h-4" />
46+
</Button>
47+
</DropdownMenuTrigger>
5748
<DropdownMenuContent side="bottom" align="start" className="w-72" onCloseAutoFocus={(e) => e.preventDefault()}>
5849
<DropdownMenuLabel className="flex items-center gap-2">
5950
<CableIcon className="w-4 h-4 text-muted-foreground" />

‎packages/web/src/features/chat/components/chatBox/languageModelInfoCard.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎packages/web/src/features/chat/components/chatBox/languageModelSelector.tsx‎

Lines changed: 72 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ import {
2424
import { useMemo, useState } from "react";
2525
import { ModelProviderLogo } from "./modelProviderLogo";
2626
import { getLanguageModelKey } from "../../utils";
27-
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
28-
import { LanguageModelInfoCard } from "./languageModelInfoCard";
2927

3028
interface LanguageModelSelectorProps {
3129
languageModels: LanguageModelInfo[];
@@ -71,89 +69,82 @@ export const LanguageModelSelector = ({
7169
open={isPopoverOpen}
7270
onOpenChange={setIsPopoverOpen}
7371
>
74-
<Tooltip>
75-
<PopoverTrigger asChild>
76-
<TooltipTrigger asChild>
77-
<Button
78-
onClick={handleTogglePopover}
72+
<PopoverTrigger asChild>
73+
<Button
74+
onClick={handleTogglePopover}
75+
className={cn(
76+
"flex p-1 rounded-md items-center justify-between bg-inherit h-6",
77+
className
78+
)}
79+
>
80+
<div className="flex items-center justify-between mx-auto max-w-64 overflow-hidden">
81+
{selectedModel ? (
82+
<ModelProviderLogo
83+
provider={selectedModel.provider}
84+
className="mr-1"
85+
/>
86+
) : (
87+
<Bot className="h-4 w-4 text-muted-foreground mr-1" />
88+
)}
89+
<span
7990
className={cn(
80-
"flex p-1 rounded-md items-center justify-between bg-inherit h-6",
81-
className
91+
"text-sm text-muted-foreground mx-1 text-ellipsis overflow-hidden whitespace-nowrap font-medium",
8292
)}
8393
>
84-
<div className="flex items-center justify-between mx-auto max-w-64 overflow-hidden">
85-
{selectedModel ? (
86-
<ModelProviderLogo
87-
provider={selectedModel.provider}
88-
className="mr-1"
89-
/>
90-
) : (
91-
<Bot className="h-4 w-4 text-muted-foreground mr-1" />
92-
)}
93-
<span
94-
className={cn(
95-
"text-sm text-muted-foreground mx-1 text-ellipsis overflow-hidden whitespace-nowrap font-medium",
96-
)}
97-
>
98-
{selectedModel ? (selectedModel.displayName ?? selectedModel.model) : "Select model"}
99-
</span>
100-
<ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
101-
</div>
102-
</Button>
103-
</TooltipTrigger>
104-
</PopoverTrigger>
105-
<TooltipContent side="bottom" className="p-0 border-0 bg-transparent shadow-none">
106-
<LanguageModelInfoCard />
107-
</TooltipContent>
108-
<PopoverContent
109-
className="w-auto p-0"
110-
align="start"
111-
onEscapeKeyDown={() => setIsPopoverOpen(false)}
112-
>
113-
<Command>
114-
<CommandInput
115-
placeholder="Search models..."
116-
onKeyDown={handleInputKeyDown}
117-
/>
118-
<CommandList>
119-
<CommandEmpty>
120-
<p>No models found.</p>
121-
</CommandEmpty>
122-
<CommandGroup>
123-
{languageModels
124-
.map((model) => {
125-
const isSelected = selectedModel && getLanguageModelKey(selectedModel) === getLanguageModelKey(model);
126-
return (
127-
<CommandItem
128-
key={getLanguageModelKey(model)}
129-
onSelect={() => {
130-
selectModel(model)
131-
}}
132-
className="cursor-pointer"
94+
{selectedModel ? (selectedModel.displayName ?? selectedModel.model) : "Select model"}
95+
</span>
96+
<ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
97+
</div>
98+
</Button>
99+
</PopoverTrigger>
100+
<PopoverContent
101+
className="w-auto p-0"
102+
align="start"
103+
onEscapeKeyDown={() => setIsPopoverOpen(false)}
104+
>
105+
<Command>
106+
<CommandInput
107+
placeholder="Search models..."
108+
onKeyDown={handleInputKeyDown}
109+
/>
110+
<CommandList>
111+
<CommandEmpty>
112+
<p>No models found.</p>
113+
</CommandEmpty>
114+
<CommandGroup>
115+
{languageModels
116+
.map((model) => {
117+
const isSelected = selectedModel && getLanguageModelKey(selectedModel) === getLanguageModelKey(model);
118+
return (
119+
<CommandItem
120+
key={getLanguageModelKey(model)}
121+
onSelect={() => {
122+
selectModel(model)
123+
}}
124+
className="cursor-pointer"
125+
>
126+
<div
127+
className={cn(
128+
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
129+
isSelected
130+
? "bg-primary text-primary-foreground"
131+
: "opacity-50 [&_svg]:invisible"
132+
)}
133133
>
134-
<div
135-
className={cn(
136-
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
137-
isSelected
138-
? "bg-primary text-primary-foreground"
139-
: "opacity-50 [&_svg]:invisible"
140-
)}
141-
>
142-
<CheckIcon className="h-4 w-4" />
143-
</div>
144-
<ModelProviderLogo
145-
provider={model.provider}
146-
className="mr-2"
147-
/>
148-
<span>{model.displayName ?? model.model}</span>
149-
</CommandItem>
150-
);
151-
})}
152-
</CommandGroup>
153-
</CommandList>
154-
</Command>
155-
</PopoverContent>
156-
</Tooltip>
134+
<CheckIcon className="h-4 w-4" />
135+
</div>
136+
<ModelProviderLogo
137+
provider={model.provider}
138+
className="mr-2"
139+
/>
140+
<span>{model.displayName ?? model.model}</span>
141+
</CommandItem>
142+
);
143+
})}
144+
</CommandGroup>
145+
</CommandList>
146+
</Command>
147+
</PopoverContent>
157148
</Popover>
158149
);
159150
};

‎packages/web/src/features/chat/components/chatBox/plusButtonInfoCard.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)