Skip to content

Commit b9490e3

Browse files
nuwandaveknuwandavek
authored
Team context cleanup (#303)
* cleanup team context, buttons * bring back limit entities
1 parent 701643e commit b9490e3

File tree

8 files changed

+153
-98
lines changed

8 files changed

+153
-98
lines changed

‎web/src/components/common/DisabledOverlay.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Markdown } from './Markdown'
1111
import { BsFillLightningFill } from 'react-icons/bs'
1212

1313

14-
export function DisabledOverlay({ toolEnabledReason }: { toolEnabledReason: string }) {
14+
export function DisabledOverlay({ toolEnabledReason, local = false }: { toolEnabledReason: string, local?: boolean }) {
1515
const isDevToolsOpen = useSelector((state: RootState) => state.settings.isDevToolsOpen)
1616
const width = getParsedIframeInfo().width
1717

@@ -20,8 +20,9 @@ export function DisabledOverlay({ toolEnabledReason }: { toolEnabledReason: stri
2020
<Box
2121
position="absolute"
2222
top={0}
23-
right={0}
24-
width={isDevToolsOpen ? '850px' : `${width}px`}
23+
right={local ? undefined : 0}
24+
left={local ? 0 : undefined}
25+
width={local ? "100%" : (isDevToolsOpen ? '850px' : `${width}px`)}
2526
height="100%"
2627
bg="rgba(255, 255, 255, 0.5)"
2728
backdropFilter="blur(4px)"

‎web/src/components/common/Support.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const SupportButton = ({email} : {email: string}) => {
5858
`;
5959
return <Tooltip hasArrow label="Support" placement='left' borderRadius={5} openDelay={500}>
6060
<Box position="relative" display="inline-block">
61-
<Button leftIcon={<BiSupport size={14}/>} size="xs" colorScheme="minusxGreen" onClick={toggleSupport} py={0}>Live Support</Button>
61+
<Button leftIcon={<BiSupport size={14}/>} size="xs" colorScheme="minusxGreen" onClick={toggleSupport} py={0}>Support</Button>
6262
{hasNotification && (
6363
<Box
6464
position="absolute"

‎web/src/components/common/TaskUI.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -665,7 +665,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
665665
{ currentTool == 'metabase' && <Button size="xs" leftIcon={<BiTable size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={()=>openDevtoolTab("Context")}>Context</Button> }
666666
{ <Button size="xs" leftIcon={<BiMessageAdd size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={clearMessages}>New Chat</Button> }
667667
{ <Button size="xs" leftIcon={<BiMemoryCard size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={()=>openDevtoolTab("Memory")}>Memory</Button> }
668-
{ <Button size="xs" leftIcon={<BiGroup size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={()=>openDevtoolTab("Team Context")}>Team Context</Button> }
668+
{ <Button size="xs" leftIcon={<BiGroup size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={()=>openDevtoolTab("Team Context")}>Team</Button> }
669669
{/* { currentTool == 'metabase' && <Button size="xs" leftIcon={<BiEdit size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={()=>openDevtoolTab("Custom Instructions")}>Custom Instructions</Button> } */}
670670
{/* { currentTool == 'metabase' && configs.IS_DEV && <Button size="xs" leftIcon={<BiTrash size={14}/>} colorScheme="minusxGreen" variant="solid" onClick={clearSQL}>Clear SQL</Button> } */}
671671
<SupportButton email={email} />
@@ -675,7 +675,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
675675
}
676676

677677
<VStack width={"100%"} alignItems={"stretch"} gap={0}>
678-
{ currentTool == 'metabase' && !taskInProgress && appEnabledStatus.inputBox &&
678+
{/* { currentTool == 'metabase' && !taskInProgress && appEnabledStatus.inputBox &&
679679
<HStack
680680
mb={-2}
681681
p={2}
@@ -700,7 +700,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
700700
</Tooltip>
701701
}
702702
</HStack>
703-
}
703+
} */}
704704

705705
<ReviewBox />
706706
{ !taskInProgress &&

‎web/src/components/devtools/Context.tsx‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,41 @@
11
import React from "react"
2-
import { Text, VStack } from "@chakra-ui/react";
2+
import { Text, VStack, Switch, Box, HStack } from "@chakra-ui/react";
33
import { TablesCatalog } from '../common/TablesCatalog';
4+
import { DisabledOverlay } from '../common/DisabledOverlay';
5+
import { useSelector } from 'react-redux';
6+
import { RootState } from '../../state/store';
7+
import { dispatch } from '../../state/dispatch';
8+
import { updateManualContextSelection } from '../../state/settings/reducer';
49

510
export const Context: React.FC = () => {
11+
const manualContext = useSelector((state: RootState) => state.settings.manuallyLimitContext)
12+
13+
const updateSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
14+
const isChecked = e.target.checked
15+
dispatch(updateManualContextSelection(isChecked))
16+
}
17+
618
return (
719
<VStack spacing={6} align="stretch" pt={6}>
820
<Text fontSize="2xl" fontWeight="bold">Context</Text>
9-
<TablesCatalog />
21+
<Box position="relative">
22+
<TablesCatalog />
23+
{!manualContext && (
24+
<DisabledOverlay
25+
toolEnabledReason="Explorer agent automatically figures out context for you."
26+
local={true}
27+
/>
28+
)}
29+
</Box>
30+
<HStack justify="center" mt={4}>
31+
<Text fontSize="sm" color="gray.600">Manually select tables/models</Text>
32+
<Switch
33+
isChecked={manualContext}
34+
onChange={updateSelection}
35+
colorScheme="minusxGreen"
36+
size="md"
37+
/>
38+
</HStack>
1039
</VStack>
1140
)
1241
}

‎web/src/components/devtools/TeamContext.tsx‎

Lines changed: 107 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React, { useEffect, useState } from "react"
2-
import { Text, Box, HStack, Badge, VStack, Select, Spinner } from "@chakra-ui/react";
2+
import { Text, Box, HStack, Badge, VStack, Spinner, Menu, MenuButton, MenuList, MenuItem, Button, Icon } from "@chakra-ui/react";
3+
import { BiChevronDown, BiCheck, BiTime, BiBuildings, BiGroup } from "react-icons/bi";
34
import { getParsedIframeInfo } from "../../helpers/origin"
45
import { useSelector } from 'react-redux';
56
import { RootState } from '../../state/store';
67
import { dispatch } from '../../state/dispatch';
78
import { setSelectedAssetId } from '../../state/settings/reducer';
9+
import { Notify } from '../common/Notify';
10+
import { CodeBlock } from '../common/CodeBlock';
811

912
export const TeamContext: React.FC = () => {
1013
const tool = getParsedIframeInfo().tool
@@ -38,38 +41,83 @@ export const TeamContext: React.FC = () => {
3841

3942
{/* Asset Selection Section */}
4043
<VStack align="stretch" spacing={4} mb={4}>
41-
<Text fontSize="md" fontWeight="semibold" color="minusxBW.800">
42-
Organization Asset Selection
43-
</Text>
44-
45-
<Box>
46-
<HStack justify="space-between" align="center" mb={3}>
47-
<Text fontSize="sm" color="minusxBW.800">
48-
Select Asset:
49-
</Text>
50-
{assetsLoading ? (
44+
<VStack align="stretch" spacing={2}>
45+
{assetsLoading ? (
46+
<Box textAlign="center">
5147
<Spinner size="sm" color="minusxGreen.500" />
52-
) : availableAssets.length > 0 ? (
53-
<Select
54-
value={selectedAssetId || availableAssets[0].slug}
55-
onChange={(e) => handleAssetSelection(e.target.value)}
48+
</Box>
49+
) : availableAssets.length > 0 ? (
50+
<Menu>
51+
<MenuButton
52+
as={Button}
53+
rightIcon={<BiChevronDown />}
5654
size="sm"
57-
maxWidth="300px"
55+
width="100%"
56+
bg="white"
57+
border="1px solid"
58+
borderColor="gray.200"
5859
color="minusxBW.800"
60+
_hover={{
61+
bg: "gray.50",
62+
borderColor: "gray.300"
63+
}}
64+
_active={{
65+
bg: "gray.100",
66+
borderColor: "gray.400"
67+
}}
68+
fontWeight="normal"
69+
textAlign="left"
70+
justifyContent="space-between"
71+
>
72+
{selectedAsset?.name || availableAssets[0]?.name}
73+
</MenuButton>
74+
<MenuList
75+
bg="white"
76+
border="1px solid"
77+
borderColor="gray.200"
78+
boxShadow="lg"
79+
borderRadius="md"
80+
py={1}
81+
width={"100%"}
5982
>
6083
{availableAssets.map((asset) => (
61-
<option key={asset.slug} value={asset.slug}>
62-
{asset.name}
63-
</option>
84+
<MenuItem
85+
key={asset.slug}
86+
onClick={() => handleAssetSelection(asset.slug)}
87+
bg="white"
88+
_hover={{
89+
bg: "gray.50"
90+
}}
91+
_focus={{
92+
bg: "gray.50"
93+
}}
94+
py={2}
95+
px={3}
96+
color="minusxBW.800"
97+
fontSize="sm"
98+
display="flex"
99+
justifyContent="space-between"
100+
alignItems="center"
101+
width={"100%"}
102+
>
103+
<Text>{asset.name}</Text>
104+
{(selectedAssetId || availableAssets[0].slug) === asset.slug && (
105+
<Icon
106+
as={BiCheck}
107+
boxSize={4}
108+
color="minusxGreen.500"
109+
/>
110+
)}
111+
</MenuItem>
64112
))}
65-
</Select>
66-
) : (
67-
<Text fontSize="sm" color="gray.500">
68-
No assets available
69-
</Text>
70-
)}
71-
</HStack>
72-
</Box>
113+
</MenuList>
114+
</Menu>
115+
) : (
116+
<Text fontSize="sm" color="gray.500">
117+
No assets available
118+
</Text>
119+
)}
120+
</VStack>
73121

74122
{/* Selected Asset Details */}
75123
{selectedAsset && (
@@ -85,38 +133,30 @@ export const TeamContext: React.FC = () => {
85133
{selectedAsset.name}
86134
</Text>
87135

88-
<HStack spacing={2}>
89-
<Badge colorScheme="blue" variant="subtle">
136+
<HStack spacing={2} wrap="wrap">
137+
<Badge colorScheme="gray" variant="subtle">
90138
{selectedAsset.type}
91139
</Badge>
92-
<Badge colorScheme="green" variant="subtle">
93-
{selectedAsset.permission}
140+
<Badge variant="subtle" colorScheme="gray">
141+
<HStack spacing={2}>
142+
<Icon as={BiGroup} boxSize={3} />
143+
<Text fontSize="xs">{selectedAsset.team_slug}</Text>
144+
</HStack>
145+
</Badge>
146+
<Badge variant="subtle" colorScheme="gray">
147+
<HStack spacing={2}>
148+
<Icon as={BiBuildings} boxSize={3} />
149+
<Text fontSize="xs">{selectedAsset.company_slug}</Text>
150+
</HStack>
151+
</Badge>
152+
<Badge variant="subtle" colorScheme="gray">
153+
<HStack spacing={2}>
154+
<Icon as={BiTime} boxSize={3} />
155+
<Text fontSize="xs">{new Date(selectedAsset.updated_at).toLocaleDateString()}</Text>
156+
</HStack>
94157
</Badge>
95158
</HStack>
96159

97-
<VStack align="stretch" spacing={2}>
98-
<HStack justify="space-between">
99-
<Text fontSize="sm" fontWeight="medium" color="gray.700">Team:</Text>
100-
<Text fontSize="sm" color="gray.600">{selectedAsset.team_slug}</Text>
101-
</HStack>
102-
<HStack justify="space-between">
103-
<Text fontSize="sm" fontWeight="medium" color="gray.700">Company:</Text>
104-
<Text fontSize="sm" color="gray.600">{selectedAsset.company_slug}</Text>
105-
</HStack>
106-
<HStack justify="space-between">
107-
<Text fontSize="sm" fontWeight="medium" color="gray.700">Created:</Text>
108-
<Text fontSize="sm" color="gray.600">
109-
{new Date(selectedAsset.created_at).toLocaleDateString()}
110-
</Text>
111-
</HStack>
112-
<HStack justify="space-between">
113-
<Text fontSize="sm" fontWeight="medium" color="gray.700">Updated:</Text>
114-
<Text fontSize="sm" color="gray.600">
115-
{new Date(selectedAsset.updated_at).toLocaleDateString()}
116-
</Text>
117-
</HStack>
118-
</VStack>
119-
120160
<AssetContentDisplay asset={selectedAsset} />
121161
</VStack>
122162
</Box>
@@ -204,42 +244,26 @@ const AssetContentDisplay: React.FC<{ asset: any }> = ({ asset }) => {
204244
} else {
205245
// For other types, display full content as JSON
206246
return (
207-
<Box
208-
bg="gray.900"
209-
p={3}
210-
borderRadius="md"
211-
border="1px solid"
212-
borderColor="gray.300"
213-
maxHeight="400px"
214-
overflowY="auto"
215-
>
216-
<Text
217-
fontSize="xs"
218-
color="green.300"
219-
fontFamily="mono"
220-
whiteSpace="pre-wrap"
221-
lineHeight="1.4"
222-
>
223-
{JSON.stringify(asset.content, null, 2)}
224-
</Text>
225-
</Box>
247+
<CodeBlock
248+
code={JSON.stringify(asset.content, null, 2)}
249+
tool="json"
250+
language="json"
251+
/>
226252
);
227253
}
228254
};
229255

230256
return (
231257
<VStack align="stretch" spacing={2}>
232-
<Box bg="blue.50" p={3} borderRadius="md" border="1px solid" borderColor="blue.200">
233-
<Text fontSize="xs" color="blue.700" fontWeight="medium" mb={1}>
234-
Enhanced Context
235-
</Text>
236-
<Text fontSize="xs" color="blue.600" lineHeight="1.4">
237-
This asset's context will be included in AI requests to provide more relevant
238-
and accurate responses based on your organization's specific information.
239-
</Text>
240-
</Box>
241-
242258
{renderContent()}
259+
260+
<Notify
261+
title="Team Context"
262+
notificationType="info"
263+
>
264+
This asset's context will be included in AI requests to provide more relevant
265+
and accurate responses based on your organization's specific information.
266+
</Notify>
243267
</VStack>
244268
);
245269
};

‎web/src/components/devtools/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ const Monitors: MonitorDef[] = [
2323
tags: ['production']
2424
},
2525
{
26-
title: "Context",
27-
component: Context,
26+
title: "Memory",
27+
component: MinusXMD,
2828
tags: ['production']
2929
},
3030
{
31-
title: "Memory",
32-
component: MinusXMD,
31+
title: "Context",
32+
component: Context,
3333
tags: ['production']
3434
},
3535
{

‎web/src/helpers/utils.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,8 @@ export const processModelToUIText = (text: string, origin: string, embedConfigs:
130130
if (match) {
131131
text = match[1];
132132
}
133-
return `> ${text}. Fixing it!`;
133+
const truncated = text.length > 100 ? text.slice(0, 100) + '...' : text;
134+
return `> Error: ${truncated}.\n\nFixing it!`;
134135
}
135136
return text
136137
}

‎web/src/state/settings/reducer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ interface MetadataProcessingCacheEntry {
1919

2020
export type AppMode = 'sidePanel' | 'selection'
2121
export type SidePanelTabName = 'chat' | 'settings' | 'context'
22-
export type DevToolsTabName = 'Context' | 'History' | 'Action History' | 'Prompts' | 'Available Actions' | 'Planner Configs' | 'Context History' | 'Testing Tools' | 'Custom Instructions' | 'General Settings' | 'Data Catalog' | 'Dev Context' | 'Memory' | 'CSS Customization' | 'Debug Tools'
22+
export type DevToolsTabName = 'Context' | 'History' | 'Action History' | 'Prompts' | 'Available Actions' | 'Planner Configs' | 'Context History' | 'Testing Tools' | 'Custom Instructions' | 'General Settings' | 'Data Catalog' | 'Dev Context' | 'Memory' | 'CSS Customization' | 'Debug Tools' | 'Team Context'
2323

2424
export const DEFAULT_TABLES = 'Default Tables'
2525
const isEmbedded = getParsedIframeInfo().isEmbedded as unknown === 'true'

0 commit comments

Comments
 (0)