Chat — alfred3_interact

Skip to main content
`Ctrl`+`K`

# Chat

class alfred3_interact.element.Chat(chat_id: str, nickname: Optional[str] = None, room: str = '', placeholder: str = 'Press enter to send your message, shift+enter for a linebreak', disabled: bool = False, readonly: bool = False, button_text: str = "<i class='fas fa-paper-plane ml-0 mr-0' style='font-size: 1rem;'></i>", msg_width: str = '70%', height: str = '350px', colors: Optional[dict] = None, color_target: str = 'nickname', you_label: str = ' (you)', button_style: str = 'btn-dark', background_color: str = 'WhiteSmoke', allow_resize: bool = True, refresh_interval: Union[int, float] = 1, **kwargs)

  Bases: `Element`

  Provides a chat window.

  This chat window can be used for real-time chat as well as for a kind of message-board.

  Parameters

    - chat_id (str) – Unique identifier for the chat. Participants will be grouped together based on the chat id. For a group chat, it is sensible to use the group id here.

    - nickname (str) – Every chat participant gets a nickname that will be used to identify participant’s messages. You can choose a custom nickname for the current session here. Although advisable, it is not strictly necessary to use unique nicknames. By default, chat participants will be identified by ‘Anonymous x’, where x is generated by counting through chat participants.

    - room (str) – Shorthand for creating individual rooms of the same chat. Defaults to an empty string: `""`.

    - placeholder (str) – Text to display as a placeholder in the input field. Defaults to Press enter to send your message, shift+enter for a linebreak.

    - disabled (bool) – If True, the input field and send button will be disabled. Participants will be able to read the chat, but not to post messages. Defaults to False.

    - readonly (bool) – If True, the input field and send button will be completely hidden. Participants will be able to read the chat, but not to post messages. Defaults to False.

    - button_text (str) – Text to display on the send-button. Defaults to a ‘paper-plane’ icon.

    - msg_width (str) – Width of chat messages in percent of the total width of the chat window. Don’t forget to use the ‘%’ sign. Defaults to ‘70%’.

    - height (str) – Element height. Supply a string with unit understood by CSS. Defaults to ‘350px’.

    - colors (dict) – Dictionary of colors to use for identification of chat participants. The dict should have nicknames as keys and color values that can be understood by CSS as values. By default, the chat element will go through a predefined list of 11 colors.

    - color_target (str) – Defines, how colors are used to identify participants. Can be ‘nickname’, ‘border’, or ‘none’. Defaults to ‘nickname’.

    - button_style (str) – Can be used for quick color-styling, using Bootstraps default color keywords: btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-light, btn-dark. You can also use the “outline” variant to get outlined buttons (eg. “btn-outline-secondary”).

    - background_color (str) – Background color for the chat windows. Can be any color understood by CSS. Defaults to ‘WhiteSmoke’, a kind of light grey.

    - allow_resize (bool) – If True, participants can adjust the height of the text input field. Defaults to True.

    - refresh_interval (int, float) – Time in seconds, determines how often the chat elements looks for new messages. Defaults to 1.

    - **kwargs –

      Inherited keyword arguments

      align | Horizontal alignment of text in the element. Does not usually apply to labels. Think of it as an alignment that applies to the innermost layer of an element (while labels are generally located at outer layers). See `LabelledElement` for more on labelled elements. Can be left (default), center, right, or justify.
      font_size | Font size for text in the element. You can use a keyword or an exact specification. The available keywords are tiny, small, normal, big, and huge. The exact specification shoul ideally include a unit, such as 1rem, or 12pt. If you supply an integer without a unit, a unit of pt will be assumed. Defaults to normal.
      instance_log | If True, the element will use an instance-specific logger, thereby allowing detailed fine- tuning of its logging behavior.
      name | Name of the element. This should be a unique identifier. It will be used to identify the corresponding data in the final data set.
      position | Horizontal position of the full element on the page. Values can be left, center (default), end, or any valid value for the justify-content flexbox utility. Takes effect only, when the element is not full-width.
      showif | A dictionary, defining conditions that must be met for the element to be shown. The conditions take the form of key-value pairs, where each key is an element name and the value is the required input. See `showif` for details.
      width | Defines the horizontal width of the element from small screens upwards. It is always full-width on extra small screens. Possible values are narrow, medium, wide, and full. For more detailed control, you can define the `element_width` attribute.

  Examples

  A minimal message-board style chat:

      import alfred3 as al
      import alfred3_interact as ali

      exp = al.Experiment()

      exp += al.Page(title="Chat Demo", name="chat_demo")
      exp.chat_demo += ali.Chat("test_chat")

  A group chat in an interactive experiment:

      import alfred3 as al
      import alfred3_interact as ali

      exp = al.Experiment()

      @exp.setup
      def setup(exp):
          exp.plugins.mm = ali.MatchMaker("a", "b", exp=exp)

      @exp.member
      class Match(ali.MatchingPage):

          def wait_for(self):
              self.exp.plugins.group = self.exp.plugins.mm.match_groupwise()
              return True

      @exp.member
      class Success(al.Page):
          title = "Match Successful!"

          def on_first_show(self):
              self += self.exp.plugins.group.chat()

  Methods

  `add_css` | Adds CSS to the element.
  `add_js` | Adds Javascript to the element.
  `added_to_experiment` | Tells the element that it was added to an experiment.
  `added_to_page` | Tells the element that it was added to a page.
  `prepare_web_widget` | Hook for computations for preparing an element's web widget.
  `render_inner_html` | Renders the element template `element_template`.

  Attributes

  `base_template` | Base template for the element, which will be used to hold the rendered element template.
  `converted_width` | List of bootstrap column widths at different screen sizes.
  `css_class_container` | Returns the name the element container's CSS class.
  `css_class_element` | Returns the name of the element's CSS class.
  `css_code` | A list of tuples, which contain a priority and CSS code.
  `css_urls` | A list of tuples, which contain a priority and an url pointing to CSS code.
  `display_standalone` | If True (default), the element will be displayed as usual on its own.
  `element_template` | The element's specific, inner template.
  `element_width` | Returns a string of column width definitions.
  `exp` | The experiment session to which this element belongs.
  `experiment` | Alias for `exp`
  `font_size` | Font size
  `js_code` | A list of tuples, which contain a priority and Javascript.
  `js_template` |
  `js_urls` | A list of tuples, which contain a priority and an url pointing to JavaScript.
  `name` | Unique identifier for the element.
  `page` | The page to which this element belongs.
  `position` | Position of the whole element on the page.
  `section` | The direct parent section of this element's page.
  `short_tree` | String, giving the exact position in the experiment.
  `should_be_shown` | Boolean, indicating whether the element is meant to be shown.
  `showif` | Conditions that have to be met for the element to be shown.
  `template_data` | Dictionary of data to be passed on to jinja templates.
  `tree` | String, giving the exact position in the experiment.
  `web_widget` | The element's rendered html code for display on a page.
  `width` | Element width