interactive avatar name change

components/InteractiveAvatarTextInput.tsx

@@ -0,0 +1,77 @@
+import { Input, Spinner, Tooltip } from "@nextui-org/react";
+import { Airplane, ArrowRight, PaperPlaneRight } from "@phosphor-icons/react";
+import clsx from "clsx";
+
+interface StreamingAvatarTextInputProps {
+  label: string;
+  placeholder: string;
+  input: string;
+  onSubmit: () => void;
+  setInput: (value: string) => void;
+  endContent?: React.ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export default function InteractiveAvatarTextInput({
+  label,
+  placeholder,
+  input,
+  onSubmit,
+  setInput,
+  endContent,
+  disabled = false,
+  loading = false,
+}: StreamingAvatarTextInputProps) {
+  function handleSubmit() {
+    if (input.trim() === "") {
+      return;
+    }
+    onSubmit();
+    setInput("");
+  }
+
+  return (
+    <Input
+      endContent={
+        <div className="flex flex-row items-center h-full">
+          {endContent}
+          <Tooltip content="Send message">
+            {loading ? (
+              <Spinner
+                className="text-indigo-300 hover:text-indigo-200"
+                size="sm"
+                color="default"
+              />
+            ) : (
+              <button
+                type="submit"
+                className="focus:outline-none"
+                onClick={handleSubmit}
+              >
+                <PaperPlaneRight
+                  className={clsx(
+                    "text-indigo-300 hover:text-indigo-200",
+                    disabled && "opacity-50"
+                  )}
+                  size={24}
+                />
+              </button>
+            )}
+          </Tooltip>
+        </div>
+      }
+      label={label}
+      placeholder={placeholder}
+      size="sm"
+      value={input}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          handleSubmit();
+        }
+      }}
+      onValueChange={setInput}
+      isDisabled={disabled}
+    />
+  );
+}