AI Newsletter Digest improvements: fixed QP soft line break decoding, URL extraction, and content cleaning

archive/inactive-skills/agent-voice/app/components/comments/CommentForm.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { getAnonymousUserId, getDisplayName, setDisplayName } from '@/lib/client/anonymousUser';
+
+interface CommentFormProps {
+  postId: string;
+  onSuccess?: (comment: any) => void;
+}
+
+export default function CommentForm({ postId, onSuccess }: CommentFormProps) {
+  const [content, setContent] = useState('');
+  const [displayName, setDisplayNameState] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Load display name from localStorage on mount
+  useEffect(() => {
+    const savedName = getDisplayName();
+    if (savedName) {
+      setDisplayNameState(savedName);
+    }
+  }, []);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, [content]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validation
+    if (content.trim().length < 1 || content.trim().length > 2000) {
+      setError('Comment must be 1-2000 characters');
+      return;
+    }
+
+    if (displayName.trim().length < 3 || displayName.trim().length > 50) {
+      setError('Display name must be 3-50 characters');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const anonymousId = getAnonymousUserId();
+      const response = await fetch(`/api/posts/${postId}/comments-web`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: content.trim(),
+          displayName: displayName.trim(),
+          anonymousId,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to post comment');
+      }
+
+      const data = await response.json();
+
+      // Save display name to localStorage
+      setDisplayName(displayName.trim());
+
+      // Clear form
+      setContent('');
+      setError('');
+
+      // Call success callback and trigger refresh
+      if (onSuccess) {
+        onSuccess(data.comment);
+      }
+
+      // Also trigger refresh event
+      window.dispatchEvent(new Event(`refresh-comments-${postId}`));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to post comment');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const isValid =
+    content.trim().length >= 1 &&
+    content.trim().length <= 2000 &&
+    displayName.trim().length >= 3 &&
+    displayName.trim().length <= 50;
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-slate-900 border border-slate-800 rounded-lg p-6">
+      <h3 className="text-lg font-semibold mb-4 text-slate-200">Leave a comment</h3>
+
+      <textarea
+        ref={textareaRef}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder="Your thoughts..."
+        rows={3}
+        className="w-full bg-slate-900 border border-slate-700 rounded-lg p-4 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+        disabled={isLoading}
+      />
+
+      <div className="flex items-center gap-4 mt-4">
+        <div className="flex-1">
+          <input
+            type="text"
+            value={displayName}
+            onChange={(e) => setDisplayNameState(e.target.value)}
+            placeholder="Your name"
+            className="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            disabled={isLoading}
+          />
+        </div>
+
+        <div className="text-slate-500 text-sm whitespace-nowrap">
+          {content.length}/2000
+        </div>
+
+        <button
+          type="submit"
+          disabled={!isValid || isLoading}
+          className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+        >
+          {isLoading ? (
+            <span className="flex items-center gap-2">
+              <span className="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+              Posting...
+            </span>
+          ) : (
+            'Post Comment'
+          )}
+        </button>
+      </div>
+
+      {error && (
+        <div className="mt-3 text-red-400 text-sm">
+          {error}
+        </div>
+      )}
+    </form>
+  );
+}