Sup

https://supchat.com/docs/
Admin
Sup is a platform for creating and sharing JavaScript patches that enable interactive chat...
Tokens:1,282
Snippets:16
Trust Score:5
Update:7 months ago
Show doc for...
Tokens:
Raw
### Create a Welcome Patch in JavaScript

Source: https://supchat.com/docs/guides/getting-started

This patch greets users by their username. It defines a main() function that returns a personalized greeting string using the globally available `sup` object to access user information. This is a fundamental example for starting with Sup patches.

```javascript
function main() {
  return `sup, ${sup.user.username}!`;
}
```

--------------------------------

### Echo User Input in JavaScript

Source: https://supchat.com/docs/guides/getting-started

This patch demonstrates how to process user input. The `main()` function checks if `sup.input.text` exists and returns a message echoing the user's input. If no input is provided, it prompts the user to type something.

```javascript
function main() {
  if (!sup.input.text) return "Type something and I'll echo it back!";
  return `You said: ${sup.input.text}`;
}
```

--------------------------------

### Store and Retrieve State in JavaScript

Source: https://supchat.com/docs/guides/getting-started

This patch demonstrates state management by keeping track of a click count. It uses `sup.user.get` and `sup.user.set` to retrieve and update the `click_count`. The `main()` function displays the current count and provides a button to increment it.

```javascript
function main() {
  // Get current count
  const count = sup.user.get("click_count") || 0;


  // Return the count and a button
  return [
    `The button has been clicked ${count} times`,
    sup.button("Add Click", handleClick),
  ];
}


function handleClick(e) {
  // Increment count
  let count = sup.user.get("click_count") || 0;
  count++;
  sup.user.set("click_count", count);
}
```

--------------------------------

### Create Interactive Buttons in JavaScript

Source: https://supchat.com/docs/guides/getting-started

This patch shows how to create interactive elements using buttons. The `main()` function returns a button labeled 'Click me!'. When clicked, the `handleClick` function is triggered, which updates a message state indicating the button has been clicked.

```javascript
function main() {
  const isButtonClicked = sup.message.get("clicked") || false;


  if (isButtonClicked) return "Clicked!";
  else return sup.button("Click me!", handleClick);
}


function handleClick(e) {
  sup.message.set("clicked", true);
}
```

--------------------------------

### Configure Patch Behavior with Constants in JavaScript

Source: https://supchat.com/docs/guides/getting-started

This patch illustrates how to define configurable values using constants at the top of the file. These constants (`GREETING_MESSAGE`, `SHOW_USERNAME`, `EMOJI`) can be easily customized through a UI in the code editor, allowing users to personalize the patch's output.

```javascript
// Configurable values
const GREETING_MESSAGE = "Sup";
const SHOW_USERNAME = true;
const EMOJI = "👋";


function main() {
  if (SHOW_USERNAME) return `${GREETING_MESSAGE} ${sup.user.username} ${EMOJI}`;
  else return `${GREETING_MESSAGE} ${EMOJI}`;
}
```

--------------------------------

### Utilize AI Features for Text Generation in JavaScript

Source: https://supchat.com/docs/guides/getting-started

This patch leverages AI capabilities to generate a haiku based on user input. If text is provided, it uses `sup.ai.promptWithContext` to ask the AI to write a haiku about it. Otherwise, it prompts the user to share some text.

```javascript
function main() {
  if (!sup.input.text)
    return "Share some text and I'll write a haiku about it!";
  return sup.ai.promptWithContext("Write a haiku about this.");
}
```
Tokens:
Raw