test.css

.chatlist{
  position: fixed;
  top: 0;
	left: 0;
  right: 0;
	bottom:38px;
  background-color: black;
  border: 1px solid blue;
  overflow-x: hidden;
  overflow-y: visible;
}
.chatbar{
  position: fixed;
  bottom:0;
  left: 0;
  right: 0;
  top: calc(100% - 32px);
}
input, button{
  border: 1px solid blue;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 16px;
	font-family: sans-serif;
  color: red;
  background: black;
}
ul{
  list-style: none;
  margin: 0;
  padding:0;
}
li{
  margin: 5px 15px 5px;
  padding: 10px 10px 5px;
  min-height: 30px;
  font-family: sans-serif;
  font-size: 14px;
  border-radius: 15px;
  border: 1px solid red;

}
li.left{
  width: 70%;
	float: left;
  text-align: left;
}
li.right{
  width: 70%;
	float: right;
  text-align: right;
}

test.dart

import 'dart:html';
import 'dart:async';
import 'dart:convert';

class IntentResponse {
  List<Element> _elements = [];

  addImageElement(String url) {
    _elements.add(ImageElement()..src = url);
  }

  addTextElement(String body) {
    _elements.add(ParagraphElement()..innerHtml = body);
  }

  addAudioElement(String url) {
    _elements.add(AudioElement()
      ..autoplay = true
      ..controls = true
      ..loop = true
      ..src = url);
  }

  addVideoElement(String url) {
    _elements.add(VideoElement()
      ..autoplay = true
      ..controls = true
      ..loop = true
      ..src = url);
  }

  get elements => _elements;
}

abstract class Intent {
  var _keywords;
  bool matchQuery(String query) {
    for (var key in _keywords) {
      if (query.contains(RegExp(key))) {
        return true;
      }
    }
    return false;
  }

  Future<IntentResponse> runIntent(String query);
}

class HiIntent extends Intent {
  final _keywords = [r"hi", r"hallo"];

  @override
  Future<IntentResponse> runIntent(String query) async {
    return IntentResponse()..addTextElement("Hi, Wie kann ich Ihnen helfen?");
  }
}

class ChuckNorrisIntent extends Intent {
  final _keywords = [r"chuck", r"norris", r"joke", r"witz"];

  @override
  Future<IntentResponse> runIntent(String query) async {
    var data =
        await HttpRequest.getString("https://api.icndb.com/jokes/random");
    var json = JSON.decode(data);
    return new IntentResponse()
      ..addImageElement(
          'https://f1.blick.ch/img/incoming/origs7200249/430014937-w980-h653/News-Norris-B150.jpg')
      ..addTextElement(json["value"]["joke"]);
  }
}

class CatIntent extends Intent {
  final _keywords = [r"katze", r"cat", r"kater"];

  @override
  Future<IntentResponse> runIntent(String query) async {
    return IntentResponse()
      ..addImageElement(
          'http://thecatapi.com/api/images/get?format=src&type=gif');
  }
}

class WeatherIntent extends Intent {
  final _keywords = [r"wetter in"];

  IntentResponse formatWeather(var json, String city) {
    return IntentResponse()
      ..addTextElement(
          "Das Wetter für ${city} ist ${json["condition"]["text"]}")
      ..addTextElement("Temperatur beträgt ${json["condition"]["temp"]}°F")
      ..addTextElement("<b>Vorhersage:</b>")
      ..addTextElement(json["forecast"].map((item) =>
              "${item["date"]}: Temperatur ${item["low"]}°F bis ${item["high"]}°F").join("<br />"));
  }

  @override
  Future<IntentResponse> runIntent(String query) async {
      String city = query.replaceAll(RegExp(r"wetter in"), "").trim();
      String request =
          "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22${city}%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
      var data = await HttpRequest.getString(request);
      var json = JSON.decode(data)["query"]["results"]["channel"]["item"];
			print(json.toString());
      return formatWeather(json, city);

}

class Helga {
  final List<Intent> _intentsMapping = [
    HiIntent(),
	  WeatherIntent(),
    ChuckNorrisIntent(),
    CatIntent()
  ];

  Future<IntentResponse> _matchIntent(String rawQuery) async {
    String query = rawQuery.toLowerCase().replaceAll(RegExp(r"\?"), "").trim();
    for (var intent in _intentsMapping) {
      if (intent.matchQuery(query)) {
        return intent.runIntent(query);
      }
    }
    return IntentResponse()
      ..addTextElement('Ich kann diese Frage leider nicht beantworten');
  }

  void _addListItem(bool leftAlign, IntentResponse response) {
    UListElement ul = querySelector("#list");
    ul
      ..children.
      add(LIElement()
        ..children.addAll(response.elements)
        ..classes.add(leftAlign ? 'left' : 'right'))
      	..scrollIntoView();
  }

  void mainLoop() {
    ButtonElement button = querySelector("#button");
    InputElement input = querySelector("#input");
    button.onClick.listen((e) {
      _addListItem(false, IntentResponse()..addTextElement(input.value));
      _matchIntent(input.value).then((IntentResponse result) {
        _addListItem(true, result);
      });
    });
  }
}

void main() {
  Helga()..mainLoop();
}

test.html

<div class="chatlist">
<ul id="list">
  <li class="left">Hi.</li>
</ul>
</div>
<div class="chatbar">
<input type="text" id="input">
<button id="button">Senden</button>
</div>