# Using AI to create Hide content bbcode wrapper

**URL:** <https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078>\
**Category:** Development\
**Created:** [August 11, 2024, 1:33am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078 "2024-08-11T01:33:25Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [August 11, 2024, 1:33am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/1 "2024-08-11T01:33:25Z")

</div>

> **[‎Gemini - direct access to Google AI](https://gemini.google.com/share/abc8a268856b)**
>
> Created with Gemini

Using generic bbcode wrapper create theme component that hides content if not in group string variable

Show drafts

Creating a Generic BBCode Wrapper and Theme Component  
Understanding the Requirements  
Based on your request, we’ll create:

A generic BBCode wrapper that can accept custom attributes.  
A theme component that hides content based on a group string variable passed to the BBCode wrapper.  
Implementing the BBCode Wrapper  
We’ll create a BBCode wrapper that can accept arbitrary attributes. These attributes will be passed to the theme component for evaluation.

Ruby

```plaintext
# config/initializers/bbcode.rb
Discourse::Plugins::BBCode.add_parser(:hide_if_not_in_group) do |tag, content|
  attributes = tag.attributes || {}
  "<div class='hide-if-not-in-group' data-group-names='#{attributes[:groups]}'>#{content}</div>"
end

```

Use code with caution.

Creating the Theme Component  
The theme component will check if the current user belongs to any of the groups specified in the data-group-names attribute. If not, it will hide the content.

JavaScript

```plaintext
// app/assets/javascripts/discourse/components/hide-if-not-in-group.js
import Component from 'discourse/components/component';

export default Component.extend({
  tagName: 'div',
  classNames: ['hide-if-not-in-group'],

  didInsertElement() {
    const currentUserId = Discourse.currentUser.id;
    const groupNames = this.element.dataset.groupNames.split(',');

    // Function to check if user is in any of the specified groups
    const userIsInAnyGroup = (userId, groupNames) => {
      // Replace this with your logic to check user group membership
      // For example, using Discourse's API or custom logic
      return groupNames.some(groupName => {
        // Check if user is in the group named `groupName`
        // Return true if the user is in the group, otherwise false
      });
    };

    if (!userIsInAnyGroup(currentUserId, groupNames)) {
      this.element.style.display = 'none';
    }
  }
});

```

Use code with caution.

Using the BBCode  
You can use the BBCode like this:

```plaintext
[hide_if_not_in_group groups="staff,moderators"]
This content is hidden for users who are not staff or moderators.
[/hide_if_not_in_group]

```

Important Considerations  
Group membership check: Replace the placeholder logic for checking user group membership with your actual implementation. You might need to use Discourse’s API or custom logic to determine group membership.  
Performance: For large numbers of users or groups, optimizing the group membership check might be necessary.  
Security: Ensure proper validation and sanitization of group names to prevent security vulnerabilities.  
Flexibility: Consider allowing additional attributes for the BBCode to control other behaviors (e.g., showing a message instead of hiding content).  
By following these steps, you’ll have a flexible BBCode wrapper and theme component that can hide content based on group membership.

* * *

Using Gemini. I was able to get these above code snippets. However having trouble to get them to work.

If someone can guide me where to place in a custom component with the sections to input and code fix it necessary.

First error that popped up when I put the JavaScript into common was an error on “import” la ne expecting a {

> **Error Pic**
>
> ![A screenshot of a computer screen displaying a code editor with a HTML file open, showing HTML and JavaScript code with an error message highlighted. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/2/8/b/28b04044347be373c1076dfb4c0cc85d4ea4965c.png)

---

_[View the full topic](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078)._