Skip to content

Commit 36610fc

Browse files
Gerome-ElassaadGerome-Elassaad
authored
Merge pull request #39 from Gerome-Elassaad/agentic-tools
Agentic tools
2 parents bfc5675 + 2daa934 commit 36610fc

33 files changed

+1944
-373
lines changed

‎.prettierignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
pnpm-lock.yaml
2-
.astro

‎app/components/@settings/core/AvatarDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
4646
<DropdownMenu.Content
4747
className={classNames(
4848
'min-w-[240px] z-[250]',
49-
'bg-white dark:bg-[#141414]',
49+
'bg-white dark:bg-codinit-elements-background-depth-3',
5050
'rounded-lg shadow-lg',
5151
'border border-gray-200/50 dark:border-gray-800/50',
5252
'animate-in fade-in-0 zoom-in-95',

‎app/components/@settings/tabs/event-logs/EventLogsTab.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -228,10 +228,7 @@ const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp
228228
<div className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</div>
229229
{log.details && (
230230
<>
231-
<button
232-
onClick={() => setLocalExpanded(!localExpanded)}
233-
className="text-xs text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
234-
>
231+
<button onClick={() => setLocalExpanded(!localExpanded)}>
235232
{localExpanded ? 'Hide' : 'Show'} Details
236233
</button>
237234
{localExpanded && renderDetails(log.details)}

‎app/components/chat/AssistantMessage.tsx‎

Lines changed: 35 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { memo, Fragment } from 'react';
1+
import { memo } from 'react';
22
import { Markdown } from './Markdown';
33
import type { JSONValue } from 'ai';
4-
import Popover from '~/components/ui/Popover';
5-
import { workbenchStore } from '~/lib/stores/workbench';
6-
import { WORK_DIR } from '~/utils/constants';
4+
import { ContextIndicator } from './ContextIndicator';
75
import WithTooltip from '~/components/ui/Tooltip';
86

97
interface AssistantMessageProps {
@@ -14,30 +12,6 @@ interface AssistantMessageProps {
1412
onFork?: (messageId: string) => void;
1513
}
1614

17-
function openArtifactInWorkbench(filePath: string) {
18-
filePath = normalizedFilePath(filePath);
19-
20-
if (workbenchStore.currentView.get() !== 'code') {
21-
workbenchStore.currentView.set('code');
22-
}
23-
24-
workbenchStore.setSelectedFile(`${WORK_DIR}/${filePath}`);
25-
}
26-
27-
function normalizedFilePath(path: string) {
28-
let normalizedPath = path;
29-
30-
if (normalizedPath.startsWith(WORK_DIR)) {
31-
normalizedPath = path.replace(WORK_DIR, '');
32-
}
33-
34-
if (normalizedPath.startsWith('/')) {
35-
normalizedPath = normalizedPath.slice(1);
36-
}
37-
38-
return normalizedPath;
39-
}
40-
4115
export const AssistantMessage = memo(({ content, annotations, messageId, onRewind, onFork }: AssistantMessageProps) => {
4216
const filteredAnnotations = (annotations?.filter(
4317
(annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
@@ -63,78 +37,41 @@ export const AssistantMessage = memo(({ content, annotations, messageId, onRewin
6337

6438
return (
6539
<div className="overflow-hidden w-full">
66-
<>
67-
<div className=" flex gap-2 items-center text-sm text-codinit-elements-textSecondary mb-2">
68-
{(codeContext || chatSummary) && (
69-
<Popover side="right" align="start" trigger={<div className="i-ph:info" />}>
70-
{chatSummary && (
71-
<div className="max-w-chat">
72-
<div className="summary max-h-96 flex flex-col">
73-
<h2 className="border border-codinit-elements-borderColor rounded-md p4">Summary</h2>
74-
<div style={{ zoom: 0.7 }} className="overflow-y-auto m4">
75-
<Markdown>{chatSummary}</Markdown>
76-
</div>
77-
</div>
78-
{codeContext && (
79-
<div className="code-context flex flex-col p4 border border-codinit-elements-borderColor rounded-md">
80-
<h2>Context</h2>
81-
<div className="flex gap-4 mt-4 codinit" style={{ zoom: 0.6 }}>
82-
{codeContext.map((x) => {
83-
const normalized = normalizedFilePath(x);
84-
return (
85-
<Fragment key={normalized}>
86-
<code
87-
className="bg-codinit-elements-artifacts-inlineCode-background text-codinit-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md text-codinit-elements-item-contentAccent hover:underline cursor-pointer"
88-
onClick={(e) => {
89-
e.preventDefault();
90-
e.stopPropagation();
91-
openArtifactInWorkbench(normalized);
92-
}}
93-
>
94-
{normalized}
95-
</code>
96-
</Fragment>
97-
);
98-
})}
99-
</div>
100-
</div>
101-
)}
102-
</div>
103-
)}
104-
<div className="context"></div>
105-
</Popover>
40+
{(codeContext || chatSummary || usage) && (
41+
<ContextIndicator
42+
files={codeContext}
43+
summary={chatSummary}
44+
tokenCount={
45+
usage
46+
? {
47+
prompt: usage.promptTokens,
48+
completion: usage.completionTokens,
49+
total: usage.totalTokens,
50+
}
51+
: undefined
52+
}
53+
/>
54+
)}
55+
{(onRewind || onFork) && messageId && (
56+
<div className="flex gap-2 mb-2 justify-end">
57+
{onRewind && (
58+
<WithTooltip tooltip="Revert to this message">
59+
<button
60+
onClick={() => onRewind(messageId)}
61+
className="i-ph:arrow-u-up-left text-lg text-codinit-elements-textSecondary hover:text-codinit-elements-textPrimary transition-colors"
62+
/>
63+
</WithTooltip>
64+
)}
65+
{onFork && (
66+
<WithTooltip tooltip="Fork chat from this message">
67+
<button
68+
onClick={() => onFork(messageId)}
69+
className="i-ph:git-fork text-lg text-codinit-elements-textSecondary hover:text-codinit-elements-textPrimary transition-colors"
70+
/>
71+
</WithTooltip>
10672
)}
107-
<div className="flex w-full items-center justify-between">
108-
{usage && (
109-
<div>
110-
Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
111-
</div>
112-
)}
113-
{(onRewind || onFork) && messageId && (
114-
<div className="flex gap-2 flex-col lg:flex-row ml-auto">
115-
{onRewind && (
116-
<WithTooltip tooltip="Revert to this message">
117-
<button
118-
onClick={() => onRewind(messageId)}
119-
key="i-ph:arrow-u-up-left"
120-
className="i-ph:arrow-u-up-left text-xl text-codinit-elements-textSecondary hover:text-codinit-elements-textPrimary transition-colors"
121-
/>
122-
</WithTooltip>
123-
)}
124-
{onFork && (
125-
<WithTooltip tooltip="Fork chat from this message">
126-
<button
127-
onClick={() => onFork(messageId)}
128-
key="i-ph:git-fork"
129-
className="i-ph:git-fork text-xl text-codinit-elements-textSecondary hover:text-codinit-elements-textPrimary transition-colors"
130-
/>
131-
</WithTooltip>
132-
)}
133-
</div>
134-
)}
135-
</div>
13673
</div>
137-
</>
74+
)}
13875
<Markdown html>{content}</Markdown>
13976
</div>
14077
);

‎app/components/chat/BaseChat.module.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,22 @@
4949
._Shadow_8mvus_1 {
5050
background: linear-gradient(
5151
to top,
52-
#0f0f0f 0%,
53-
rgba(15, 15, 15, 0.987) 8.1%,
54-
rgba(15, 15, 15, 0.951) 15.5%,
55-
rgba(15, 15, 15, 0.896) 22.5%,
56-
rgba(15, 15, 15, 0.825) 29%,
57-
rgba(15, 15, 15, 0.741) 35.3%,
58-
rgba(15, 15, 15, 0.648) 41.2%,
59-
rgba(15, 15, 15, 0.55) 47.1%,
60-
rgba(15, 15, 15, 0.45) 52.9%,
61-
rgba(15, 15, 15, 0.352) 58.8%,
62-
rgba(15, 15, 15, 0.259) 64.7%,
63-
rgba(15, 15, 15, 0.175) 71%,
64-
rgba(15, 15, 15, 0.104) 77.5%,
65-
rgba(15, 15, 15, 0.049) 84.5%,
66-
rgba(15, 15, 15, 0.013) 91.9%,
67-
rgba(15, 15, 15, 0) 100%
52+
var(--codinit-elements-bg-depth-1) 0%,
53+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 98.7%, transparent) 8.1%,
54+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 95.1%, transparent) 15.5%,
55+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 89.6%, transparent) 22.5%,
56+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 82.5%, transparent) 29%,
57+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 74.1%, transparent) 35.3%,
58+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 64.8%, transparent) 41.2%,
59+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 55%, transparent) 47.1%,
60+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 45%, transparent) 52.9%,
61+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 35.2%, transparent) 58.8%,
62+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 25.9%, transparent) 64.7%,
63+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 17.5%, transparent) 71%,
64+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 10.4%, transparent) 77.5%,
65+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 4.9%, transparent) 84.5%,
66+
color-mix(in srgb, var(--codinit-elements-bg-depth-1) 1.3%, transparent) 91.9%,
67+
transparent 100%
6868
);
6969
}
7070

‎app/components/chat/BaseChat.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ChatHeader } from '~/components/header/ChatHeader';
1616
import { PreviewHeader } from '~/components/workbench/PreviewHeader';
1717
import { CodeModeHeader } from '~/components/workbench/CodeModeHeader';
1818
import { workbenchStore } from '~/lib/stores/workbench';
19+
import { TextShimmer } from '~/components/ui/text-shimmer';
1920
import { classNames } from '~/utils/classNames';
2021
import { PROVIDER_LIST } from '~/utils/constants';
2122
import { Messages } from './Messages.client';
@@ -632,7 +633,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
632633
<span className="text-codinit-elements-textPrimary"> Deploy</span>
633634
</h1>
634635
<p className="text-md lg:text-xl mb-8 text-codinit-elements-textSecondary animate-fade-in animation-delay-200">
635-
Let your imagination build your next startup idea.
636+
<TextShimmer>Let your imagination build your next startup idea</TextShimmer>
636637
</p>
637638
</div>
638639
)}

‎app/components/chat/ColorSchemeDialog.tsx‎

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
136136
case 'none':
137137
return 'none';
138138
case 'sm':
139-
return '0 1px 2px 0 rgb(0 0 0 / 0.05)';
139+
return '0 1px 2px 0 rgb(0 0 0 / 0.1)';
140140
case 'md':
141141
return '0 4px 6px -1px rgb(0 0 0 / 0.1)';
142142
case 'lg':
@@ -436,14 +436,48 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
436436
</div>
437437
);
438438

439+
const getBorderRadiusPixels = (key: string): string => {
440+
switch (key) {
441+
case 'none':
442+
return '0px';
443+
case 'sm':
444+
return '0.25rem';
445+
case 'md':
446+
return '0.375rem';
447+
case 'lg':
448+
return '0.5rem';
449+
case 'xl':
450+
return '0.75rem';
451+
case 'full':
452+
return '9999px';
453+
default:
454+
return '0.375rem';
455+
}
456+
};
457+
458+
const getSpacingPixels = (key: string): string => {
459+
switch (key) {
460+
case 'tight':
461+
return '0.5rem';
462+
case 'normal':
463+
return '1rem';
464+
case 'relaxed':
465+
return '1.25rem';
466+
case 'loose':
467+
return '1.5rem';
468+
default:
469+
return '1rem';
470+
}
471+
};
472+
439473
const renderStylingSection = () => (
440-
<div className="space-y-6">
441-
<h3 className="text-lg font-semibold text-codinit-elements-textPrimary flex items-center gap-2">
442-
<div className="w-2 h-2 rounded-full bg-codinit-elements-item-contentAccent"></div>
443-
Design Styling
444-
</h3>
474+
<div className="space-y-6 max-h-80 overflow-y-auto pr-4 custom-scrollbar">
475+
<div className="space-y-6 pr-2">
476+
<h3 className="text-lg font-semibold text-codinit-elements-textPrimary flex items-center gap-2">
477+
<div className="w-2 h-2 rounded-full bg-codinit-elements-item-contentAccent"></div>
478+
Design Styling
479+
</h3>
445480

446-
<div className="grid grid-cols-3 gap-6">
447481
{/* Border Radius */}
448482
<div className="space-y-3">
449483
<label className="text-sm font-medium text-codinit-elements-textPrimary">Border Radius</label>
@@ -461,7 +495,8 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
461495
>
462496
<div className="text-center space-y-1">
463497
<div
464-
className={`w-6 h-6 mx-auto rounded-${option.key === 'none' ? 'none' : option.key === 'sm' ? 'sm' : option.key === 'md' ? 'md' : option.key === 'lg' ? 'lg' : option.key === 'xl' ? 'xl' : 'full'} bg-current opacity-80`}
498+
className="w-6 h-6 mx-auto bg-current opacity-80"
499+
style={{ borderRadius: getBorderRadiusPixels(option.key) }}
465500
/>
466501
<div className="text-xs font-medium">{option.label}</div>
467502
</div>
@@ -483,7 +518,10 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
483518
shadow === option.key
484519
? 'bg-codinit-elements-item-backgroundAccent border-codinit-elements-borderColorActive text-white'
485520
: 'bg-codinit-elements-background-depth-3 dark:bg-codinit-elements-background-depth-3-dark border-codinit-elements-borderColor dark:border-codinit-elements-borderColor-dark hover:border-codinit-elements-borderColorActive text-codinit-elements-textSecondary dark:text-codinit-elements-textSecondary-dark hover:text-codinit-elements-textPrimary dark:hover:text-codinit-elements-textPrimary-dark'
486-
} ${option.key === 'none' ? '' : option.key === 'sm' ? 'shadow-sm' : option.key === 'md' ? 'shadow-md' : option.key === 'lg' ? 'shadow-lg' : 'shadow-xl'}`}
521+
}`}
522+
style={{
523+
boxShadow: shadow === option.key ? getBoxShadow() : 'none',
524+
}}
487525
>
488526
<div className="text-center space-y-1">
489527
<div className="w-6 h-6 mx-auto bg-current rounded opacity-80" />
@@ -510,10 +548,13 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
510548
}`}
511549
>
512550
<div className="text-center space-y-1">
513-
<div className="flex justify-center space-x-1">
514-
<div className="w-2 h-6 bg-current rounded opacity-80" />
515-
<div className="w-2 h-6 bg-current rounded opacity-80" />
516-
<div className="w-2 h-6 bg-current rounded opacity-80" />
551+
<div
552+
className="flex justify-center items-center opacity-80"
553+
style={{ gap: getSpacingPixels(option.key) }}
554+
>
555+
<div className="w-2 h-6 bg-current rounded" />
556+
<div className="w-2 h-6 bg-current rounded" />
557+
<div className="w-2 h-6 bg-current rounded" />
517558
</div>
518559
<div className="text-xs font-medium">{option.label}</div>
519560
</div>
@@ -654,27 +695,16 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
654695
{/* Preview Container */}
655696
<div className="flex-1 rounded-xl border border-codinit-elements-borderColor overflow-hidden bg-codinit-elements-background-depth-3">
656697
<div
657-
className="h-full w-full p-6 overflow-y-auto custom-scrollbar"
698+
className="h-full w-full overflow-y-auto custom-scrollbar"
658699
style={{
659700
backgroundColor: palette[mode].background,
660701
color: palette[mode].text,
661702
fontFamily: font.join(', '),
662-
borderRadius:
663-
borderRadius === 'none'
664-
? '0px'
665-
: borderRadius === 'sm'
666-
? '0.25rem'
667-
: borderRadius === 'md'
668-
? '0.375rem'
669-
: borderRadius === 'lg'
670-
? '0.5rem'
671-
: borderRadius === 'xl'
672-
? '0.75rem'
673-
: '1rem',
703+
padding: getSpacingPixels(spacing),
674704
}}
675705
>
676706
{/* Preview Content */}
677-
<div className="space-y-12 mt-4">
707+
<div style={{ display: 'flex', flexDirection: 'column', gap: getSpacingPixels(spacing) }}>
678708
{/* Hero Section */}
679709
<div
680710
className="p-8 text-center"
@@ -883,7 +913,7 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
883913
className="py-4"
884914
style={{ borderBottom: `1px solid ${palette[mode].accent}` }}
885915
>
886-
<button className="flex w-full items-center justify-between text-left">
916+
<button>
887917
<span
888918
className="text-sm font-medium"
889919
style={{ color: palette[mode].primary, fontFamily: font.join(', ') }}

0 commit comments

Comments
 (0)