add feedback widget with posthog

src/components/DocsFeedback.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+
+// PostHog Survey ID
+const POSTHOG_SURVEY_ID = '019c4ba3-c53b-0000-7cef-4903439f7e52';
+
+declare global {
+  interface Window {
+    posthog?: {
+      capture: (event: string, properties?: Record<string, unknown>) => void;
+    };
+  }
+}
+
+const POSITIVE_OPTIONS = [
+  'Accurate',
+  'Easy to understand',
+  'Solved my problem',
+  'Helped me decide to use the product',
+  'Other',
+];
+
+const NEGATIVE_OPTIONS = [
+  'Hard to understand',
+  'Incorrect information',
+  'Missing the information',
+  'Other',
+];
+
+// Submit feedback to PostHog
+const submitFeedbackToPostHog = (
+  isHelpful: 'yes' | 'no',
+  reason: string,
+  additionalFeedback: string,
+  pageUrl: string
+): void => {
+  if (typeof window === 'undefined' || !window.posthog) {
+    console.error('PostHog not available');
+    return;
+  }
+
+  const properties: Record<string, unknown> = {
+    $survey_id: POSTHOG_SURVEY_ID,
+    $survey_response: isHelpful === 'yes' ? 'Yes 👍' : 'No 👎',
+    reason: reason,
+    pageUrl: pageUrl,
+  };
+
+  if (additionalFeedback.trim()) {
+    properties.$survey_response_1 = additionalFeedback;
+  }
+
+  window.posthog.capture('survey sent', properties);
+};
+
+export const DocsFeedback: React.FC = () => {
+  const [feedbackState, setFeedbackState] = useState<
+    'initial' | 'positive' | 'negative' | 'submitted'
+  >('initial');
+  const [selectedReason, setSelectedReason] = useState<string>('');
+  const [additionalFeedback, setAdditionalFeedback] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleThumbsUp = () => {
+    setFeedbackState('positive');
+    setSelectedReason('');
+    setAdditionalFeedback('');
+  };
+
+  const handleThumbsDown = () => {
+    setFeedbackState('negative');
+    setSelectedReason('');
+    setAdditionalFeedback('');
+  };
+
+  const handleSubmit = () => {
+    if (!selectedReason) return;
+
+    setIsSubmitting(true);
+    const pageUrl = typeof window !== 'undefined' ? window.location.pathname : '';
+    const isPositive = feedbackState === 'positive';
+
+    submitFeedbackToPostHog(
+      isPositive ? 'yes' : 'no',
+      selectedReason,
+      additionalFeedback,
+      pageUrl
+    );
+
+    setIsSubmitting(false);
+    setFeedbackState('submitted');
+  };
+
+  const options = feedbackState === 'positive' ? POSITIVE_OPTIONS : NEGATIVE_OPTIONS;
+
+  if (feedbackState === 'submitted') {
+    return (
+      <div className="sidebar-feedback">
+        <div className="sidebar-feedback-success">
+          <svg
+            className="sidebar-feedback-success-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M8 12l2.5 2.5L16 9" />
+          </svg>
+          <span>Thanks for your feedback!</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (feedbackState === 'positive' || feedbackState === 'negative') {
+    return (
+      <div className="sidebar-feedback">
+        <div className="sidebar-feedback-expanded">
+          <div className="sidebar-feedback-question">
+            {feedbackState === 'positive' ? 'What did you like?' : 'What went wrong?'}
+          </div>
+          <div className="sidebar-feedback-options">
+            {options.map((option) => (
+              <label key={option} className="sidebar-feedback-option">
+                <input
+                  type="radio"
+                  name="feedback-reason"
+                  value={option}
+                  checked={selectedReason === option}
+                  onChange={(e) => setSelectedReason(e.target.value)}
+                />
+                <span className="sidebar-feedback-option-text">{option}</span>
+              </label>
+            ))}
+          </div>
+          <textarea
+            value={additionalFeedback}
+            onChange={(e) => setAdditionalFeedback(e.target.value)}
+            placeholder="Tell us more about your experience."
+            className="sidebar-feedback-textarea"
+            rows={3}
+          />
+          <button
+            onClick={handleSubmit}
+            disabled={isSubmitting || !selectedReason}
+            className="sidebar-feedback-submit-btn"
+          >
+            {isSubmitting ? 'Submitting...' : 'Submit'}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sidebar-feedback">
+      <div className="sidebar-feedback-initial">
+        <span className="sidebar-feedback-label">Was this helpful?</span>
+        <div className="sidebar-feedback-thumbs">
+          <button
+            onClick={handleThumbsUp}
+            className="sidebar-feedback-thumb"
+            aria-label="Yes, this was helpful"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+            </svg>
+          </button>
+          <button
+            onClick={handleThumbsDown}
+            className="sidebar-feedback-thumb"
+            aria-label="No, this was not helpful"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DocsFeedback;

src/components/PageSidebarWithBadges.astro

@@ -1,6 +1,7 @@
 ---
 import Default from '@astrojs/starlight/components/PageSidebar.astro';
 import PersistenceBadge from './PersistenceBadge.astro';
+import DocsFeedback from './DocsFeedback';
 
 // Get the current page route
 const route = Astro.locals.starlightRoute;
@@ -53,6 +54,18 @@ const availablePlans = getAvailablePlans(pricingTags, isSnowflakePage);
 
 <PersistenceBadge />
 
+<div class="sidebar-feedback-wrapper">
+  <DocsFeedback client:load />
+</div>
+
+<style>
+  .sidebar-feedback-wrapper {
+    padding: 1rem;
+    border-top: 1px solid var(--sl-color-gray-5);
+    margin-top: 1rem;
+  }
+</style>
+
 <style>
   .pricing-badges {
     padding: 0 0 1rem 1rem;

src/styles/custom.css

@@ -318,4 +318,175 @@ h2#starlight__on-this-page::before {
 .sl-banner a {
     color: var(--sl-color-accent);
     text-decoration: underline;
+}
+
+/* Sidebar Feedback Widget Styles */
+.sidebar-feedback {
+    font-family: 'Aeonikpro', sans-serif;
+}
+
+.sidebar-feedback-initial {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-feedback-label {
+    color: var(--sl-color-gray-2);
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.sidebar-feedback-thumbs {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.sidebar-feedback-thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background-color: transparent;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 6px;
+    color: var(--sl-color-gray-3);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.sidebar-feedback-thumb svg {
+    width: 18px;
+    height: 18px;
+}
+
+.sidebar-feedback-thumb:hover {
+    background-color: var(--sl-color-gray-6);
+    border-color: var(--sl-color-accent);
+    color: var(--sl-color-accent);
+}
+
+/* Expanded state with options */
+.sidebar-feedback-expanded {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.sidebar-feedback-question {
+    color: var(--sl-color-gray-2);
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+}
+
+.sidebar-feedback-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-feedback-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--sl-color-gray-3);
+}
+
+.sidebar-feedback-option input[type="radio"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--sl-color-gray-4);
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.sidebar-feedback-option input[type="radio"]:checked {
+    border-color: var(--sl-color-accent);
+    background-color: var(--sl-color-accent);
+    box-shadow: inset 0 0 0 3px var(--sl-color-bg);
+}
+
+.sidebar-feedback-option:hover input[type="radio"] {
+    border-color: var(--sl-color-accent);
+}
+
+.sidebar-feedback-option-text {
+    color: var(--sl-color-gray-2);
+    line-height: 1.4;
+}
+
+.sidebar-feedback-textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--sl-color-gray-6);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 6px;
+    color: var(--sl-color-white);
+    font-family: 'Aeonikpro', sans-serif;
+    font-size: 13px;
+    resize: vertical;
+    min-height: 60px;
+    transition: border-color 0.2s ease;
+}
+
+.sidebar-feedback-textarea::placeholder {
+    color: var(--sl-color-gray-4);
+}
+
+.sidebar-feedback-textarea:focus {
+    outline: none;
+    border-color: var(--sl-color-accent);
+}
+
+.sidebar-feedback-submit-btn {
+    padding: 0.5rem 1rem;
+    background-color: var(--sl-color-gray-5);
+    border: 1px solid var(--sl-color-gray-4);
+    border-radius: 6px;
+    color: var(--sl-color-gray-2);
+    font-family: 'Aeonikpro', sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+}
+
+.sidebar-feedback-submit-btn:hover:not(:disabled) {
+    background-color: var(--sl-color-gray-4);
+    border-color: var(--sl-color-accent);
+}
+
+.sidebar-feedback-submit-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Success state */
+.sidebar-feedback-success {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: rgba(34, 197, 94, 0.1);
+    border-radius: 6px;
+    color: #22c55e;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.sidebar-feedback-success-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
 }