Skip to content

Commit 90f56c1

Browse files
sparrow-jssparrow-js
authored
Merge pull request #73 from sparrow-js/custom-template
fix custom template
2 parents 2e39cd8 + 290d2bf commit 90f56c1

File tree

4 files changed

+94
-88
lines changed

4 files changed

+94
-88
lines changed

‎components/components/chatInput/index.tsx‎

Lines changed: 77 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -70,97 +70,93 @@ export default function ChatInput({openWhiteboard, showAnim}: props) {
7070

7171
return (
7272
<div
73-
className="relative"
73+
className="flex flex-col py-[12vh] my-12 justify-center items-center"
7474
>
75+
{/* animate-wiggle */}
7576
<div
76-
className="absolute bottom-0 z-10 flex flex-col w-full"
77+
className={classNames(
78+
"sm:max-w-lg m-auto shadow-lg divide-zinc-600 min-h-12 bg-gray-900 shadow-black/40 rounded-[24px] overflow-hidden max-w-[90%] flex items-center flex-1 min-w-0 px-3 md:pl-4 bg-gray-900 absolute z-10 bottom-0",
79+
{
80+
"animate-wiggle": showAnim,
81+
}
82+
)}
7783
>
78-
{/* animate-wiggle */}
79-
<div
80-
className={classNames(
81-
"sm:max-w-lg m-auto shadow-lg divide-zinc-600 min-h-12 bg-gray-900 shadow-black/40 rounded-[24px] overflow-hidden max-w-[90%] flex items-center flex-1 min-w-0 px-3 md:pl-4 bg-gray-900 relative z-10",
82-
{
83-
"animate-wiggle": showAnim,
84-
}
85-
)}
86-
>
87-
<div
88-
className="relative w-full flex items-center transition-all duration-300 min-h-full h-fit" >
89-
<label htmlFor="textarea-input" className="sr-only">Prompt</label>
90-
<div className="relative flex flex-1 min-w-0 self-start">
91-
<div className="flex-[1_0_50%] min-w-[50%] overflow-x-visible -ml-[100%] opacity-0 invisible pointer-events-none">
92-
<div className="[&amp;_textarea]:px-0 opacity-0 invisible pointer-events-none">A "report an issue" modal</div>
93-
</div>
94-
<textarea
95-
id="home-prompt"
96-
maxLength={1000}
97-
ref={inputRef}
98-
className="flex-[1_0_50%] min-w-[50%] disabled:opacity-80 text-white text-sm bg-transparent border-0 shadow-none resize-none outline-none ring-0 disabled:bg-transparent selection:bg-indigo-300 selection:text-black placeholder:text-zinc-400 [scroll-padding-block:0.75rem] pr-2 leading-relaxed py-3 pl-1 [&amp;_textarea]:px-0"
99-
spellCheck="false"
100-
rows={1}
101-
placeholder="enter demand ideas"
102-
style={{
103-
resize: 'none',
104-
colorScheme: 'dark',
105-
overflow: 'auto'
106-
}}
107-
value={initCreateText}
108-
onChange={(e) => {
109-
setInitCreateText(e.target.value);
110-
}}
111-
></textarea>
84+
<div
85+
className="relative w-full flex items-center transition-all duration-300 min-h-full h-fit" >
86+
<label htmlFor="textarea-input" className="sr-only">Prompt</label>
87+
<div className="relative flex flex-1 min-w-0 self-start">
88+
<div className="flex-[1_0_50%] min-w-[50%] overflow-x-visible -ml-[100%] opacity-0 invisible pointer-events-none">
89+
<div className="[&amp;_textarea]:px-0 opacity-0 invisible pointer-events-none">A "report an issue" modal</div>
11290
</div>
113-
<div className="flex items-center">
91+
<textarea
92+
id="home-prompt"
93+
maxLength={1000}
94+
ref={inputRef}
95+
className="flex-[1_0_50%] min-w-[50%] disabled:opacity-80 text-white text-sm bg-transparent border-0 shadow-none resize-none outline-none ring-0 disabled:bg-transparent selection:bg-indigo-300 selection:text-black placeholder:text-zinc-400 [scroll-padding-block:0.75rem] pr-2 leading-relaxed py-3 pl-1 [&amp;_textarea]:px-0"
96+
spellCheck="false"
97+
rows={1}
98+
placeholder="enter demand ideas"
99+
style={{
100+
resize: 'none',
101+
colorScheme: 'dark',
102+
overflow: 'auto'
103+
}}
104+
value={initCreateText}
105+
onChange={(e) => {
106+
setInitCreateText(e.target.value);
107+
}}
108+
></textarea>
109+
</div>
110+
<div className="flex items-center">
111+
<button
112+
className="shrink-0 text-m font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-transparent text-white hover:bg-gray-800 flex items-center justify-center focus-visible:ring-0 focus-visible:bg-gray-800 rounded-full w-[28px] h-[28px] text-[19px]"
113+
id="send-button"
114+
onClick={openWhiteboard}
115+
>
116+
<span className="sr-only">Send</span>
117+
<LiaPencilRulerSolid />
118+
</button>
119+
120+
<label data-id="prompt-form-image-upload" htmlFor="fileUpload" className="shrink-0 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-transparent text-white hover:bg-gray-800 flex items-center justify-center focus-visible:ring-0 focus-visible:bg-gray-800 rounded-full w-[28px] h-[28px] cursor-pointer focus-within:bg-gray-800" data-state="closed">
121+
<input {...getInputProps()}/>
122+
<svg onClick={open} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4"><g clipPath="url(#a)"><path fill="currentColor" fillRule="evenodd" d="M14.5 2.5h-13v6.69l1.47-1.47.22-.22h3.75l.03-.03 3.5-3.5h1.06l2.97 2.97V2.5ZM8 8.56l1.53 1.53.53.53L9 11.68l-.53-.53L6.32 9H3.81l-2.28 2.28-.03.03v1.19a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9.06L11 5.56 8.03 8.53 8 8.56Zm-8 2.25v1.69A2.5 2.5 0 0 0 2.5 15h11a2.5 2.5 0 0 0 2.5-2.5V9.56l.56-.56-.53-.53-.03-.03V1H0v9.69l-.06.06.06.06Z" clipRule="evenodd"></path></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"></path></clipPath></defs></svg>
123+
<span className="sr-only">Upload image</span>
124+
</label>
125+
{loading ? (
126+
<button className='w-[28px] h-[28px] scale-75'>
127+
<Spinner />
128+
</button>
129+
) : (
114130
<button
115-
className="shrink-0 text-m font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-transparent text-white hover:bg-gray-800 flex items-center justify-center focus-visible:ring-0 focus-visible:bg-gray-800 rounded-full w-[28px] h-[28px] text-[19px]"
131+
className="shrink-0 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-transparent text-white hover:bg-gray-800 flex items-center justify-center focus-visible:ring-0 focus-visible:bg-gray-800 rounded-full w-[28px] h-[28px]"
116132
id="send-button"
117-
onClick={openWhiteboard}
133+
onClick={clickHandler}
118134
>
119135
<span className="sr-only">Send</span>
120-
<LiaPencilRulerSolid />
136+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
137+
<path fillRule="evenodd" clipRule="evenodd" d="M13.5 3V2.25H15V3V10C15 10.5523 14.5522 11 14 11H3.56062L5.53029 12.9697L6.06062 13.5L4.99996 14.5607L4.46963 14.0303L1.39641 10.9571C1.00588 10.5666 1.00588 9.93342 1.39641 9.54289L4.46963 6.46967L4.99996 5.93934L6.06062 7L5.53029 7.53033L3.56062 9.5H13.5V3Z" fill="currentColor"></path>
138+
</svg>
121139
</button>
122-
123-
<label data-id="prompt-form-image-upload" htmlFor="fileUpload" className="shrink-0 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-transparent text-white hover:bg-gray-800 flex items-center justify-center focus-visible:ring-0 focus-visible:bg-gray-800 rounded-full w-[28px] h-[28px] cursor-pointer focus-within:bg-gray-800" data-state="closed">
124-
<input {...getInputProps()}/>
125-
<svg onClick={open} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4"><g clipPath="url(#a)"><path fill="currentColor" fillRule="evenodd" d="M14.5 2.5h-13v6.69l1.47-1.47.22-.22h3.75l.03-.03 3.5-3.5h1.06l2.97 2.97V2.5ZM8 8.56l1.53 1.53.53.53L9 11.68l-.53-.53L6.32 9H3.81l-2.28 2.28-.03.03v1.19a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9.06L11 5.56 8.03 8.53 8 8.56Zm-8 2.25v1.69A2.5 2.5 0 0 0 2.5 15h11a2.5 2.5 0 0 0 2.5-2.5V9.56l.56-.56-.53-.53-.03-.03V1H0v9.69l-.06.06.06.06Z" clipRule="evenodd"></path></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"></path></clipPath></defs></svg>
126-
<span className="sr-only">Upload image</span>
127-
</label>
128-
{loading ? (
129-
<button className='w-[28px] h-[28px] scale-75'>
130-
<Spinner />
131-
</button>
132-
) : (
133-
<button
134-
className="shrink-0 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-transparent text-white hover:bg-gray-800 flex items-center justify-center focus-visible:ring-0 focus-visible:bg-gray-800 rounded-full w-[28px] h-[28px]"
135-
id="send-button"
136-
onClick={clickHandler}
137-
>
138-
<span className="sr-only">Send</span>
139-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
140-
<path fillRule="evenodd" clipRule="evenodd" d="M13.5 3V2.25H15V3V10C15 10.5523 14.5522 11 14 11H3.56062L5.53029 12.9697L6.06062 13.5L4.99996 14.5607L4.46963 14.0303L1.39641 10.9571C1.00588 10.5666 1.00588 9.93342 1.39641 9.54289L4.46963 6.46967L4.99996 5.93934L6.06062 7L5.53029 7.53033L3.56062 9.5H13.5V3Z" fill="currentColor"></path>
141-
</svg>
142-
</button>
143-
)}
144-
</div>
140+
)}
145141
</div>
146-
</div>
147-
<div className='flex w-full mt-4 item-center justify-center gap-2'>
148-
{
149-
shortcutIdeas.map((shortcut) => {
150-
return (
151-
<button
152-
key={shortcut.id}
153-
className='text-slate-400 text-sm rounded-full border border-zinc-200 px-2 py-0.5 inline-flex gap-1 items-center whitespace-nowrap select-none hover:border-zinc-800 transition-colors'
154-
onClick={() => {
155-
setInitCreateText(shortcut.value);
156-
}}
157-
>
158-
{shortcut.label}
159-
<GoArrowUpRight/>
160-
</button>)
161-
})
162-
}
163-
</div>
142+
</div>
143+
</div>
144+
<div className='absolute flex flex-wrap items-center justify-center max-w-full gap-2 px-4 mx-auto mt-6 text-sm top-full whitespace-nowrap'>
145+
{
146+
shortcutIdeas.map((shortcut) => {
147+
return (
148+
<button
149+
key={shortcut.id}
150+
className='text-slate-400 text-sm rounded-full border border-zinc-200 px-2 py-0.5 inline-flex gap-1 items-center whitespace-nowrap select-none hover:border-zinc-800 transition-colors'
151+
onClick={() => {
152+
setInitCreateText(shortcut.value);
153+
}}
154+
>
155+
{shortcut.label}
156+
<GoArrowUpRight/>
157+
</button>)
158+
})
159+
}
164160
</div>
165161
</div>
166162
);

‎pages/index.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@ export default function Dashboard() {
8585

8686
return (
8787
<div
88-
{...getRootProps({ style: style as any })}
88+
{...getRootProps({ })}
8989
className="dark:bg-black dark:text-white h-full"
9090
>
91-
<div className='fixed w-full bg-slate-50 z-20'>
91+
<div className='fixed w-full bg-slate-50 z-20 top-0'>
9292
<Header />
9393
</div>
9494
<main className='pb-10'>
@@ -118,15 +118,28 @@ export default function Dashboard() {
118118
</div>
119119
</div> */}
120120
<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
121-
<div className="relative mt-80 w-[520px] rounded-md shadow-sm">
121+
<div className="flex relative flex-col w-full items-center px-6">
122122
<ChatInput
123123
openWhiteboard={() => {
124124
setOpenWhiteboard(true);
125125
}}
126126
showAnim={showAnim}
127127
/>
128128
</div>
129-
<p className='mt-8 flex justify-center items-center'>
129+
{/* className={classNames(
130+
"fixed w-full h-full top-0 left-0 z-50",
131+
{
132+
'hidden': !openWhiteboard,
133+
}
134+
)} */}
135+
<p
136+
className={classNames(
137+
"mt-20 flex justify-center items-center p-4 rounded border-2 ",
138+
{ 'border-white': !isDragAccept,
139+
'border-dashed border-blue-600': isDragAccept,
140+
}
141+
)}
142+
>
130143
<span className='mr-2'>
131144
<svg className="icon text-blue-600 w-[35px] h-[35px] fill-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5831"><path d="M597.333333 256h85.333334v85.333333h213.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v320L682.666667 554.666667l1.536 343.978666 94.848-91.733333L855.082667 938.666667H384a42.666667 42.666667 0 0 1-42.666667-42.666667v-213.333333H256v-85.333334h85.333333V384a42.666667 42.666667 0 0 1 42.666667-42.666667h213.333333V256z m341.333334 483.754667V896a42.666667 42.666667 0 0 1-2.048 13.098667l-83.626667-144.810667L938.666667 739.754667zM170.666667 597.333333v85.333334H85.333333v-85.333334h85.333334z m0-170.666666v85.333333H85.333333v-85.333333h85.333334z m0-170.666667v85.333333H85.333333V256h85.333334z m0-170.666667v85.333334H85.333333V85.333333h85.333334z m170.666666 0v85.333334H256V85.333333h85.333333z m170.666667 0v85.333334h-85.333333V85.333333h85.333333z m170.666667 0v85.333334h-85.333334V85.333333h85.333334z" p-id="5832"></path></svg>
132145
</span>

‎service/events/generateCode.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,6 @@ export async function streamGenerateCode(
8686
}
8787
}
8888

89-
console.log('**************111', prompt_messages);
90-
9189
let completion;
9290
const SHOULD_MOCK_AI_RESPONSE = params['mockAiResponse'];
9391
//test: params['generationType'] === 'create'

‎service/events/prompts.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -891,7 +891,6 @@ export async function assemblePrompt(
891891

892892

893893
if (generated_code_config === 'react_shadcn_ui') {
894-
// https://raw.githubusercontent.com/sparrow-js/ant-codeAI/accurate-output/public/prompts/shadcn-ui.md
895894
// http://localhost:3000/prompts/shadcn-ui.md
896895
// const response = await fetch(`http://localhost:3000/prompts/shadcn-ui.md`, {
897896
const response = await fetch(`https://raw.githubusercontent.com/sparrow-js/ant-codeAI/main/public/prompts/shadcn-ui.md`, {

0 commit comments

Comments
 (0)