diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx
index a53698aab3..32a7e3618d 100644
--- a/web-chat/src/App.tsx
+++ b/web-chat/src/App.tsx
@@ -1,24 +1,13 @@
import React from 'react';
-import logo from './logo.svg';
import './App.css';
+import Log from './Log';
function App() {
return (
);
}
diff --git a/web-chat/src/Log.tsx b/web-chat/src/Log.tsx
new file mode 100644
index 0000000000..765b8f57a3
--- /dev/null
+++ b/web-chat/src/Log.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface Props {
+}
+
+interface State {
+ lines: string[];
+}
+
+export default class Log extends React.Component {
+ state: State = {
+ lines: [
+ 'here',
+ 'is',
+ 'a',
+ 'line'
+ ]
+ };
+
+ render() {
+ return (
+
+ {this.renderLines()}
+
+ );
+ }
+
+ renderLines() {
+
+ const lines = [];
+ for (const line of this.state.lines) {
+ lines.push({line}
);
+ }
+
+ return (
+
+ {lines}
+
+ );
+ }
+}
diff --git a/web-chat/src/index.css b/web-chat/src/index.css
index ec2585e8c0..b6e43f80b0 100644
--- a/web-chat/src/index.css
+++ b/web-chat/src/index.css
@@ -11,3 +11,14 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+.log-row {
+ text-align: left;
+ margin-left: 20px;
+}
+
+.log-row:after {
+ clear: both;
+ content: "";
+ display: table;
+}