Make UI work with Gemini / move bgColor to backend and add style to format_message()

[palladius]

I've noticed that Gemini uses slightly different roles, so I brought this complexity to server-side rather than client-side, since its a couple of nested ifs.

Original

Views/index.rb:

let bgColor;
                switch (message.role) {
                    case 'user':
                        bgColor = 'bg-blue-100';
                        break;
                    case 'assistant':
                        bgColor = 'bg-red-100';
                        break;
                    case 'tool':
                        bgColor = 'bg-gray-100';
                        break;
                    default:
                        bgColor = 'bg-white';
                }

My proposal

Add a style to backend hash

views/index.rb: View:

                let bgColor = message.style;
                messageElement.className = `mb-2 p-2 rounded ${bgColor} whitespace-pre-wrap`;

Controller:

  def format_style(message)
    bgColor = ''
    effective_role = message.role
    effective_role = 'array' if message.content.empty?
    case effective_role
      when 'user'
        bgColor = 'bg-blue-100 font-bold' # Added font-bold here
    when 'assistant'
        bgColor = 'bg-red-100'
    when 'model'
        bgColor = "bg-gradient-to-r from-blue-500 to-purple-600 font-bold"
    when 'tool', 'function', 'array'
        bgColor = 'bg-gray-100 font-mono text-xs' # or text-xs for even smaller
    else # unknown
        bgColor = 'bg-yellow-100'
    end
    bgColor
  end

 private

  # "2024-09-15 08:42:32 +0200" => '08:42'
  def hh_mm()
    Time.now.to_s[11,5]
  end

  def format_message(message, add_time: false)
    emoji = format_role(message.role)
    emoji += hh_mm if add_time
    {
      role: message.role,
      # content: "[deb_role=#{message.role}]" + format_content(message).to_s,
      content: format_content(message).to_s,
      emoji: emoji, # format_role(message.role) + hh_mm,
      style: format_style(message),
    }
  end

[palladius]

Note I've added a new effective_role = 'array' type (maybe better "model_array" because when the model puts an array it should probably be in robotic style (gray, monofonted) and dfifferent to when its speaking Englihs back to you (black, bold, ..).

[palladius]

My working code is here: https://github.com/palladius/ecommerce-ai-assistant-demo-gemini/