Skip to content

Commit 4a14cbf

Browse files
author
ci-bot
committed
lint
1 parent 7521273 commit 4a14cbf

2 files changed

Lines changed: 119 additions & 120 deletions

File tree

‎libs/remix-ui/remix-ai-assistant/src/components/AutocompletePanel.tsx‎

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,28 @@ const AVAILABLE_COMMANDS: Command[] = [
2424
// { name: 'workspace', description: 'Generate a new workspace', shortcut: '/w', category: 'Generate' },
2525
// { name: 'setAssistant', description: 'Set AI assistant provider', category: 'Settings' },
2626
// { name: 'ollama', description: 'Configure Ollama integration', category: 'Settings' },
27-
27+
2828
// Compilation & Analysis
2929
{ name: 'compile', description: 'Compile contract', category: 'Build' },
3030
// { name: 'slither', description: 'Run Slither security analysis', category: 'Analysis' },
3131
// { name: 'mythril', description: 'Run Mythril security scan', category: 'Analysis' },
32-
32+
3333
// Deployment & Verification
3434
{ name: 'deploy', description: 'Deploy contract to network', category: 'Deploy' },
3535
{ name: 'etherscan', description: 'Fetch contract from Etherscan and call the Etherscan service', category: 'Import' },
3636
// { name: 'verify', description: 'Verify contract on block explorer', category: 'Deploy' },
37-
37+
3838
// Testing & Debugging
3939
// { name: 'test', description: 'Run contract tests', category: 'Test' },
4040
// { name: 'debug', description: 'Debug transaction', category: 'Debug' },
41-
41+
4242
// DeFi & Integrations
4343
{ name: 'thegraph', description: 'Fetch data from The Graph', category: 'Data' },
4444
{ name: 'alchemy', description: 'Fetch data from Alchemy', category: 'Data' },
4545
{ name: 'circle', description: 'Circle integration', category: 'DeFi' },
4646
// { name: 'uniswap', description: 'Uniswap integration', category: 'DeFi' },
4747
// { name: 'aave', description: 'Aave integration', category: 'DeFi' },
48-
48+
4949
// Documentation & Help
5050
// { name: 'help', description: 'Show available commands', category: 'Help' },
5151
// { name: 'docs', description: 'Open documentation', category: 'Help' },
@@ -74,15 +74,15 @@ export const AutocompletePanel: React.FC<AutocompletePanelProps> = ({
7474
}
7575

7676
const search = searchTerm.toLowerCase().slice(1) // Remove the '/' prefix
77-
77+
7878
// If search is empty (just '/'), show all commands
79-
const filtered = search.length === 0
80-
? AVAILABLE_COMMANDS
81-
: AVAILABLE_COMMANDS.filter(cmd =>
82-
cmd.name.toLowerCase().includes(search.toLowerCase()) ||
79+
const filtered = search.length === 0
80+
? AVAILABLE_COMMANDS
81+
: AVAILABLE_COMMANDS.filter(cmd =>
82+
cmd.name.toLowerCase().includes(search.toLowerCase()) ||
8383
cmd.shortcut?.toLowerCase().includes(search.toLowerCase()) ||
8484
cmd.description.toLowerCase().includes(search.toLowerCase())
85-
)
85+
)
8686

8787
// Sort by relevance only if there's a search term
8888
if (search.length > 0) {
@@ -162,120 +162,120 @@ export const AutocompletePanel: React.FC<AutocompletePanelProps> = ({
162162
backgroundColor,
163163
border: `1px solid ${borderColor}`,
164164
zIndex: 1000,
165-
boxShadow: isDarkTheme
165+
boxShadow: isDarkTheme
166166
? '0 10px 25px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3)'
167167
: '0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05)'
168168
}}
169169
data-id="autocomplete-panel"
170170
>
171-
<div className="px-3 py-2 border-bottom d-flex align-items-center" style={{
172-
backgroundColor: isDarkTheme ? '#252535' : '#f8f9fa',
173-
borderColor,
174-
color: secondaryTextColor,
175-
fontSize: '0.85rem'
176-
}}>
177-
<span style={{ opacity: 0.9 }}>💡 Choose an action and complete with your prompt</span>
178-
</div>
179-
<div className="overflow-auto" style={{ maxHeight: '300px' }}>
180-
{Object.entries(groupedCommands).map(([category, commands]) => {
181-
return (
182-
<div key={category}>
183-
<div
184-
className="px-3 py-2 small font-weight-bold text-uppercase"
185-
style={{
186-
color: categoryColor,
187-
fontSize: '0.7rem',
188-
letterSpacing: '0.05em',
189-
backgroundColor: isDarkTheme ? '#1f1f2f' : '#fafbfc',
190-
borderBottom: `1px solid ${borderColor}`
191-
}}
192-
>
193-
{category === 'Build' && '🔨 '}
194-
{category === 'Deploy' && '🚀 '}
195-
{category === 'Import' && '📥 '}
196-
{category === 'Data' && '📁 '}
197-
{category === 'DeFi' && '💰 '}
198-
{category === 'Frontend' && '🎨 '}
199-
{category}
200-
</div>
201-
{commands.map((cmd) => {
202-
const index = flatCommands.indexOf(cmd)
203-
const isSelected = index === selectedIndex
204-
205-
return (
206-
<button
207-
key={cmd.name}
208-
ref={(el) => itemRefs.current[index] = el}
209-
className="d-flex align-items-center justify-content-between w-100 px-3 py-2 border-0 text-left"
210-
style={{
211-
backgroundColor: isSelected ? selectedColor : 'transparent',
212-
color: textColor,
213-
cursor: 'pointer',
214-
transition: 'all 0.15s ease',
215-
borderLeft: isSelected ? `3px solid ${isDarkTheme ? '#4f93ff' : '#007bff'}` : '3px solid transparent'
216-
}}
217-
onMouseEnter={(e) => {
218-
e.currentTarget.style.backgroundColor = isSelected ? selectedColor : hoverColor
219-
onSelectedIndexChange(index)
220-
}}
221-
onMouseLeave={(e) => {
222-
e.currentTarget.style.backgroundColor = isSelected ? selectedColor : 'transparent'
223-
}}
224-
onClick={() => onSelect(cmd)}
225-
data-id={`autocomplete-item-${cmd.name}`}
171+
<div className="px-3 py-2 border-bottom d-flex align-items-center" style={{
172+
backgroundColor: isDarkTheme ? '#252535' : '#f8f9fa',
173+
borderColor,
174+
color: secondaryTextColor,
175+
fontSize: '0.85rem'
176+
}}>
177+
<span style={{ opacity: 0.9 }}>💡 Choose an action and complete with your prompt</span>
178+
</div>
179+
<div className="overflow-auto" style={{ maxHeight: '300px' }}>
180+
{Object.entries(groupedCommands).map(([category, commands]) => {
181+
return (
182+
<div key={category}>
183+
<div
184+
className="px-3 py-2 small font-weight-bold text-uppercase"
185+
style={{
186+
color: categoryColor,
187+
fontSize: '0.7rem',
188+
letterSpacing: '0.05em',
189+
backgroundColor: isDarkTheme ? '#1f1f2f' : '#fafbfc',
190+
borderBottom: `1px solid ${borderColor}`
191+
}}
226192
>
227-
<div className="d-flex flex-column">
228-
<div className="d-flex align-items-center">
229-
<span className="font-weight-medium" style={{ fontSize: '0.9rem' }}>
193+
{category === 'Build' && '🔨 '}
194+
{category === 'Deploy' && '🚀 '}
195+
{category === 'Import' && '📥 '}
196+
{category === 'Data' && '📁 '}
197+
{category === 'DeFi' && '💰 '}
198+
{category === 'Frontend' && '🎨 '}
199+
{category}
200+
</div>
201+
{commands.map((cmd) => {
202+
const index = flatCommands.indexOf(cmd)
203+
const isSelected = index === selectedIndex
204+
205+
return (
206+
<button
207+
key={cmd.name}
208+
ref={(el) => itemRefs.current[index] = el}
209+
className="d-flex align-items-center justify-content-between w-100 px-3 py-2 border-0 text-left"
210+
style={{
211+
backgroundColor: isSelected ? selectedColor : 'transparent',
212+
color: textColor,
213+
cursor: 'pointer',
214+
transition: 'all 0.15s ease',
215+
borderLeft: isSelected ? `3px solid ${isDarkTheme ? '#4f93ff' : '#007bff'}` : '3px solid transparent'
216+
}}
217+
onMouseEnter={(e) => {
218+
e.currentTarget.style.backgroundColor = isSelected ? selectedColor : hoverColor
219+
onSelectedIndexChange(index)
220+
}}
221+
onMouseLeave={(e) => {
222+
e.currentTarget.style.backgroundColor = isSelected ? selectedColor : 'transparent'
223+
}}
224+
onClick={() => onSelect(cmd)}
225+
data-id={`autocomplete-item-${cmd.name}`}
226+
>
227+
<div className="d-flex flex-column">
228+
<div className="d-flex align-items-center">
229+
<span className="font-weight-medium" style={{ fontSize: '0.9rem' }}>
230230
/{cmd.name}
231-
</span>
232-
{cmd.shortcut && (
233-
<span
234-
className="ms-2 px-2 py-1 rounded-pill small"
235-
style={{
236-
backgroundColor: isDarkTheme ? '#1d1d2d' : '#e9ecef',
237-
color: isDarkTheme ? '#4f93ff' : '#007bff',
238-
fontSize: '0.7rem',
239-
fontWeight: 500
231+
</span>
232+
{cmd.shortcut && (
233+
<span
234+
className="ms-2 px-2 py-1 rounded-pill small"
235+
style={{
236+
backgroundColor: isDarkTheme ? '#1d1d2d' : '#e9ecef',
237+
color: isDarkTheme ? '#4f93ff' : '#007bff',
238+
fontSize: '0.7rem',
239+
fontWeight: 500
240+
}}
241+
>
242+
{cmd.shortcut}
243+
</span>
244+
)}
245+
</div>
246+
<span
247+
className="small"
248+
style={{
249+
color: secondaryTextColor,
250+
fontSize: '0.78rem',
251+
marginTop: '2px',
252+
opacity: 0.85
240253
}}
241254
>
242-
{cmd.shortcut}
255+
{cmd.description}
243256
</span>
244-
)}
245-
</div>
246-
<span
247-
className="small"
248-
style={{
249-
color: secondaryTextColor,
250-
fontSize: '0.78rem',
251-
marginTop: '2px',
252-
opacity: 0.85
253-
}}
254-
>
255-
{cmd.description}
256-
</span>
257-
</div>
258-
{isSelected && (
259-
<span
260-
className="badge rounded-pill ms-2"
261-
style={{
262-
backgroundColor: isDarkTheme ? '#4f93ff' : '#007bff',
263-
color: '#ffffff',
264-
fontSize: '0.65rem',
265-
padding: '3px 8px',
266-
fontWeight: 'normal'
267-
}}
268-
>
257+
</div>
258+
{isSelected && (
259+
<span
260+
className="badge rounded-pill ms-2"
261+
style={{
262+
backgroundColor: isDarkTheme ? '#4f93ff' : '#007bff',
263+
color: '#ffffff',
264+
fontSize: '0.65rem',
265+
padding: '3px 8px',
266+
fontWeight: 'normal'
267+
}}
268+
>
269269
↵ Enter
270-
</span>
271-
)}
272-
</button>
273-
)
274-
})}
275-
</div>
276-
)
277-
})}
278-
</div>
270+
</span>
271+
)}
272+
</button>
273+
)
274+
})}
275+
</div>
276+
)
277+
})}
278+
</div>
279279
</div>
280280
)
281281
}

‎libs/remix-ui/remix-ai-assistant/src/components/prompt.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,15 +93,14 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
9393
}
9494
}, [input, isStreaming])
9595

96-
9796
// Handle command selection
9897
const handleCommandSelect = useCallback((command: Command) => {
9998
const formattedCommand = '/' + command.name
100-
99+
101100
// If user has already typed something after the initial "/", preserve it
102101
const spaceIndex = input.indexOf(' ')
103102
const existingArgs = spaceIndex > -1 ? input.substring(spaceIndex).trim() : ''
104-
103+
105104
setInput(existingArgs ? formattedCommand + existingArgs + ': ': formattedCommand + ': ')
106105
setShowAutocomplete(false)
107106
// Focus back on textarea
@@ -116,7 +115,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
116115
setInput(prev => prev + '\n')
117116
return
118117
}
119-
118+
120119
// Handle autocomplete navigation if panel is visible
121120
if (showAutocomplete && e.key !== 'Enter') {
122121
if (e.key === 'ArrowDown') {
@@ -141,12 +140,12 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
141140
return
142141
}
143142
}
144-
143+
145144
// Handle Enter key
146145
if (e.key === 'Enter' && !e.shiftKey && !isStreaming && aiRouteReady) {
147146
// Check if input has content after the slash command format (e.g., "/command: content")
148147
const hasCommandContent = input.includes(':') && input.split(':')[1]?.trim().length > 0
149-
148+
150149
if (showAutocomplete && !hasCommandContent) {
151150
// If autocomplete is showing and no command content yet, select the highlighted command
152151
e.preventDefault()

0 commit comments

Comments
 (0)