(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

(2.4) feat(feedback-ui): Add screenshots - #4338

Merged
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements
Jan 16, 2025
Merged

(2.4) feat(feedback-ui): Add screenshots #4338
antonis merged 122 commits into
feedback-uifrom
antonis/3959-captureFeedback-attachements

Conversation

@antonis

@antonisantonis commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on #4328

📜 Description

This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:

Note that string attachments are converted to UInt8Array before sending to the server.

AndroidiOS

💡 Motivation and Context

Fixes#4337

💚 How did you test it?

CI, Manual testing (example)

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

#skip-changelog

As discussed we will use the no props configuration in the changelog.

…ents
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackForm.styles.ts
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/src/js/index.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
#	samples/react-native/src/App.tsx
#	samples/react-native/src/Screens/ErrorsScreen.tsx
Comment threadpackages/core/src/js/utils/base64ToUint8Array.ts Outdated
Comment threadpackages/core/src/js/feedback/defaults.ts Outdated
@krystofwoldrich

Copy link
Copy Markdown
Contributor

The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

@antonis

antonis commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@antonis Have you explored the option of taking screenshot of the app and attaching it?

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.
Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

@krystofwoldrich

Copy link
Copy Markdown
Contributor

I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with react-native-view-shot instead of selecting an image with react-native-image-picker as the sample implementation.

Got it. This is nice and flexible, but provides less out of the box value.

Looking at it now I see that we already have captureScreenshot (that convenietly returns Uint8Array) functionality exposed by the native SDKs. I'm not sure if this would be useful though since it will be a screenshot of the feedback form unless we use a screenshot taken before 🤔 Maybe I can explore this on this or a separate PR.

Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

@antonisantonis mentioned this pull request Jan 13, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Thank you for the feedback @krystofwoldrich 🙇

But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again.

This makes sense 👍 I will iterate along the auto-inject functionality.

Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file.

👍

…ents
# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx
#	packages/core/src/js/feedback/FeedbackForm.types.ts
#	packages/core/src/js/feedback/defaults.ts
#	packages/core/test/feedback/FeedbackForm.test.tsx
Comment threadsamples/react-native/src/App.tsx Outdated
Comment threadpackages/core/src/js/feedback/FeedbackForm.tsx Outdated

@krystofwoldrichkrystofwoldrich left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! 🚀

Just left two small nits in the comments.

@krystofwoldrichkrystofwoldrich changed the title (2.4) Feedback form attachments(2.4) feat(feedback-ui): Add screenshots Jan 16, 2025
@antonis

Copy link
Copy Markdown
ContributorAuthor

Just left two small nits in the comments.

Thank you once more for the feedback @krystofwoldrich 🙇
I fixed the nits and I'll merge on the feature branch as soon as the CI is 🟢

@antonis
antonis merged commit aa15c88 into feedback-uiJan 16, 2025
@antonis
antonis deleted the antonis/3959-captureFeedback-attachements branch January 16, 2025 12:02
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add attachment/screenshot handling in the feedback form UI

3 participants

@antonis@krystofwoldrich@lucas-zimerman