improve: bring AI chat style to "generate cell with AI" area #7672
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
I have read the CLA Document and I hereby sign the CLA You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot. |
for more information, see https://pre-commit.ci
| const PROVIDERS_THAT_SUPPORT_ATTACHMENTS = new Set([ | ||
| "openai", | ||
| "google", | ||
| "anthropic", | ||
| ] as const); | ||
| const SUPPORTED_ATTACHMENT_TYPES = ["image/*", "text/*"]; | ||
| const MAX_ATTACHMENT_SIZE = 1024 * 1024 * 50; // 50MB |
There was a problem hiding this comment.
i think we can import this from ChatPanel instead of redeclaring
| placeholder={ | ||
| placeholder || `Generate with AI, ${CONTEXT_TRIGGER} to include context` | ||
| placeholder || | ||
| `Generate with AI, ${CONTEXT_TRIGGER} to include context about tables or dataframes.\nCode from other cells is automatically included. ` |
There was a problem hiding this comment.
| `Generate with AI, ${CONTEXT_TRIGGER} to include context about tables or dataframes.\nCode from other cells is automatically included. ` | |
| `Generate with AI, ${CONTEXT_TRIGGER} to include context` |
| </> | ||
| )} | ||
| <Tooltip content={isLoading ? "Stop" : "Submit"}> | ||
| <Button |
There was a problem hiding this comment.
I personally prefer the send button to be next to the prompt input, but open to change. I know it differs from the chat panel
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="center"> | ||
| <div className="px-2 py-1 font-semibold">Select language</div> | ||
| <div className="px-2 py-1 font-semibold">Generate</div> |
There was a problem hiding this comment.
| <div className="px-2 py-1 font-semibold">Generate</div> | |
| <div className="px-2 py-1 text-sm text-muted-foreground">Generate</div> |
| const onAddFiles = useEvent((newFiles: File[]) => { | ||
| if (newFiles.length === 0) { | ||
| return; | ||
| } | ||
|
|
||
| let fileSize = 0; | ||
| for (const file of newFiles) { | ||
| fileSize += file.size; | ||
| } | ||
|
|
||
| if (fileSize > MAX_ATTACHMENT_SIZE) { | ||
| toast({ | ||
| title: "File size exceeds 50MB limit", | ||
| variant: "danger", | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| setFiles((prev) => [...(prev ?? []), ...newFiles]); | ||
| }); | ||
|
|
||
| const removeFile = (fileToRemove: File) => { | ||
| setFiles((prev) => prev?.filter((f) => f !== fileToRemove)); | ||
| }; |
There was a problem hiding this comment.
I think we can extract this logic out to a hook to be reused by chatPanel & this
export function useFileState() {
const [files, setFiles] = useState<File[]>([]);
const onAddFiles = useEvent((newFiles: File[]) => {
if (newFiles.length === 0) {
return;
}
let fileSize = 0;
for (const file of newFiles) {
fileSize += file.size;
}
if (fileSize > MAX_ATTACHMENT_SIZE) {
toast({
title: "File size exceeds 50MB limit",
variant: "danger",
});
return;
}
setFiles((prev) => [...(prev ?? []), ...newFiles]);
});
const removeFile = (fileToRemove: File) => {
setFiles((prev) => prev?.filter((f) => f !== fileToRemove));
};
return { files, setFiles, onAddFiles, removeFile };
}| ); | ||
|
|
||
| // Determine if provider supports attachments | ||
| const currentModel = ai?.models?.chat_model || DEFAULT_AI_MODEL; |
There was a problem hiding this comment.
| const currentModel = ai?.models?.chat_model || DEFAULT_AI_MODEL; | |
| const currentModel = ai?.models?.edit_model || DEFAULT_AI_MODEL; |
| /> | ||
| </div> | ||
| </div> | ||
| {filesPills} |
There was a problem hiding this comment.
what do you think about putting the filesPills left of the @ symbol
|
Hey @m-rgba , would you mind signing the CLA
|
2 participants
📝 Summary
Looking to make the "Generate cell with AI" input area consistent with the AI chat sidebar.