nlkitai / nlux

The π—£π—Όπ˜„π—²π—Ώπ—³π˜‚π—Ή Conversational AI JavaScript Library πŸ’¬ β€”Β UI for any LLM, supporting LangChain / HuggingFace / Vercel AI, and more 🧑 React, Next.js, and plain JavaScript ⭐️
https://docs.nlkit.com/nlux
Other
1.09k stars 63 forks source link

Feature Request: Expose theme used through ResponseRenderer props #131

Open woozyking opened 1 month ago

woozyking commented 1 month ago

This would be a great addition to allow developers to adapt ResponseRenderer implementations to take advantage of the theme in use.

For instance, with such exposure, one can do something like:

const RTaiResponseRenderer: ResponseRenderer<string> = (props) => {
  const isDarkTheme = props.theme === 'dark';

  const styles = {
    container: {
      padding: '20px',
      backgroundColor: isDarkTheme ? '#1e1e1e' : '#ffffff',
      color: isDarkTheme ? '#ffffff' : '#000000',
    },
    content: {
      marginBottom: '20px',
      backgroundColor: isDarkTheme ? '#ffffff' : '#1e1e1e',
      color: isDarkTheme ? '#000000' : '#ffffff',
    },
    ...
  };

  return (
    <div style={styles.container}>
      <div style={styles.content}>
        <Markdown>{props.content}</Markdown>
      </div>
      ...other stuff
    </div>
  );
};
salmenus commented 1 month ago

Nice suggestion @woozyking I had that use-case as well, while implementing an app that uses NLUX We'll prioritize it