feat(sender): add toolbar feature (#40)

Support customize toolbar of Sender component.

Author: xx-yoke

playground/src/Chat.tsx

@@ -2,13 +2,14 @@ import { MessageSquarePlus } from "lucide-react";
 import { useState } from "react";
 import { BubbleList } from "../../dist/bubble";
 import { Button } from "../../dist/button";
+import { FileUpload } from "../../dist/file-upload";
 import {
   Prompt,
   PromptDescription,
   Prompts,
   PromptTitle,
 } from "../../dist/prompt";
-import { Sender } from "../../dist/sender";
+import { InputCount, Sender } from "../../dist/sender";
 import type { MessageParam } from "../../dist/utils";
 import { useChat } from "../../dist/utils/chat";
 import { useMateChat } from "../../dist/utils/core";
@@ -93,6 +94,12 @@ export function Chat() {
             initialMessage={prompt}
             input={input}
             onMessageChange={setPrompt}
+            toolbar={
+              <div className="flex flex-row justify-between w-full">
+                <InputCount count={prompt.length} limit={500} />
+                <FileUpload />
+              </div>
+            }
           />
         </main>
       </div>

src/file-upload.tsx

@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import Appendix from "./icons/appendix.svg";
 
 export interface FileUploadProps extends React.ComponentProps<"button"> {
-  onFilesSelect: (files: File[]) => void;
+  onFilesSelect?: (files: File[]) => void;
 }
 
 export function FileUpload({
@@ -17,7 +17,7 @@ export function FileUpload({
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(e.target.files ?? []);
-      onFilesSelect(files);
+      onFilesSelect?.(files);
       if (fileInputRef.current) fileInputRef.current.value = "";
     },
     [onFilesSelect],

src/sender.tsx

@@ -7,6 +7,25 @@ import PublishNew from "./icons/publish-new.svg";
 import QuickStop from "./icons/quick-stop.svg";
 import type { Backend } from "./utils";
 
+export interface InputCountProps extends React.ComponentProps<"span"> {
+  count: number;
+  limit: number;
+  className: string;
+}
+
+export function InputCount({
+  count,
+  limit,
+  className,
+  ...props
+}: InputCountProps) {
+  return (
+    <span className={className} {...props}>
+      {count} / {limit}
+    </span>
+  );
+}
+
 export interface SenderButtonProps extends React.ComponentProps<"button"> {
   /**
    * Icon to display in the button.
@@ -86,6 +105,7 @@ export interface SenderProps extends React.ComponentProps<"div"> {
    * @param controller - The AbortController to abort the request.
    */
   onSend?: (controller: AbortController) => void;
+  toolbar?: React.ReactNode;
 }
 export function Sender({
   className,
@@ -94,6 +114,7 @@ export function Sender({
   onMessageChange,
   input,
   onSend,
+  toolbar,
   ...props
 }: SenderProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -164,11 +185,13 @@ export function Sender({
         className="w-full pt-4 px-4 border-0 rounded-2xl resize-none focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400"
         rows={2}
       />
-      <div className="flex items-center justify-between w-full px-4 py-2">
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-gray-500">{message.length} / 500</span>
-        </div>
-        <SenderButton onClick={handleSend} isSending={isSending} />
+      <div className="flex items-center w-full px-4 py-2 gap-4">
+        {toolbar}
+        <SenderButton
+          onClick={handleSend}
+          isSending={isSending}
+          className="ml-auto"
+        />
       </div>
     </div>
   );