wip

src/app/chats/components/chatForm.tsx

@@ -0,0 +1,73 @@
+import { nip04 } from 'nostr-tools';
+import { useCallback, useState } from 'react';
+
+import { MediaUploader } from '@app/chats/components/mediaUploader';
+
+import { EnterIcon } from '@shared/icons';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function ChatForm({
+  receiverPubkey,
+  userPrivkey,
+}: {
+  receiverPubkey: string;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const { publish } = useNostr();
+  const [value, setValue] = useState('');
+
+  const encryptMessage = useCallback(async () => {
+    return await nip04.encrypt(userPrivkey, receiverPubkey, value);
+  }, [receiverPubkey, value]);
+
+  const submit = async () => {
+    const message = await encryptMessage();
+    const tags = [['p', receiverPubkey]];
+
+    // publish message
+    await publish({ content: message, kind: 4, tags });
+
+    // reset state
+    setValue('');
+  };
+
+  const handleEnterPress = (e: {
+    key: string;
+    shiftKey: KeyboardEvent['shiftKey'];
+    preventDefault: () => void;
+  }) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <MediaUploader setState={setValue} />
+      <div className="flex w-full items-center justify-between rounded-full bg-white/20 px-3">
+        <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleEnterPress}
+          spellCheck={false}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          placeholder="Message"
+          className="h-10 flex-1 resize-none bg-transparent px-3 text-white placeholder:text-white/80 focus:outline-none"
+        />
+        <button
+          type="button"
+          onClick={submit}
+          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-white/80"
+        >
+          <EnterIcon className="h-5 w-5" />
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}